jquery easyui datagrid純js導出到excel

說明:easyui本身的datagrid不支持導出excel,查了一些資料後的結合後端代碼實現導出功能的都是C#, 下面的例子使用jquery前端代碼導出excel

         主要的方法是使用datagrid的getData方法得到json數據,然後將json數據生成excel文件下載

         因爲是後端分頁,只能導出當前頁的內容,如果要導出全部內容,可以向後臺發送json請求,然後產生Excel文件,在這裏不再演示,有興趣的可以聯繫我,QQ:1633675284

1.html代碼

 

<table id="tablef" class="easyui-datagrid" title="DBOSS系統--任務展示"
		style="width:100%;padding-top: 0px;"
		data-options="region:'center',border:false,rownumbers:true,pagination:true,url:'logoperate.htm',singleSelect:false,collapsible:true,toolbar:'#tb'">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th data-options="field:'status'">Status</th>
				<th data-options="field:'system'">System</th>
				<th data-options="field:'etl_job'">Etl_job</th>
				<th data-options="field:'etl_desc'">Etl_desc</th>
				<th data-options="field:'job_type'">Job_type</th>
				<th data-options="field:'frequency'">Frequency</th>
				<th data-options="field:'stream'">Stream</th>
				<th data-options="field:'dependency'">Dependency</th>
				<th data-options="field:'src_script'">Src_script</th>
				<th data-options="field:'is_timetrigger'">Is_timetrigger</th>
				<th data-options="field:'job_type'">Job_type</th>
				<th data-options="field:'start_time'">Start_time</th>
				<th data-options="field:'group_server'">Group_server</th>
				<th data-options="field:'creator'">Creator</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<div>
				<label>系統:</label> <select class="easyui-combobox" name="state"
					style="width:200px;">
					<option value="APP">APP</option>
					<option value="STG">STG</option>
					<option value="ODS">ODS</option>
					<option value="OTHER">....</option>
				</select> <label>任務:</label> <input id="jobname" class="easyui-searchbox"
					data-options="prompt:'Please Input Value',searcher:doJobNameSearch"
					style="width:20%"> </input> <label>創建者:</label> <input id="creator"
					class="easyui-searchbox"
					data-options="prompt:'Please Input Value',searcher:doCreatorSearch"
					style="width:20%"> </input>
			</div>
			<div>
				<label>觸發:</label> <input id="creator" class="easyui-searchbox"
					data-options="prompt:'Please Input Value',searcher:doCreatorSearch"
					style="width:20%"> </input> <label> 依賴:</label> <input
					id="creator" class="easyui-searchbox"
					data-options="prompt:'Please Input Value',searcher:doCreatorSearch"
					style="width:20%"> </input> <label>腳本   :</label> <input
					id="creator" class="easyui-searchbox"
					data-options="prompt:'Please Input Value',searcher:doCreatorSearch"
					style="width:20%"> </input>
			</div>
		</div>
		<div>
			<a href="#" class="easyui-linkbutton"
				data-options="iconCls:'icon-search'" οnclick="doAllSearch()">Search</a>
			<a href="#" class="easyui-linkbutton" style="width:12%"
				οnclick="window.location='task.htm'">新增作業</a> <a href="#"
				class="easyui-linkbutton" style="width:12%">修改作業</a> <a href="#"
				class="easyui-linkbutton" style="width:12%">無效作業</a> <a href="#"
				class="easyui-linkbutton" style="width:12%">下線作業</a> <a href="#"
				class="easyui-linkbutton" style="width:12%">有效作業</a> <a href="#"
				class="easyui-linkbutton" style="width:12%">批量新增</a> <a href="#"
				class="easyui-linkbutton" style="width:12%" id="btnExport">導出</a>
		</div>
	</div>

 

 

 

 

 

2.javascript 代碼

 

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
			//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
			var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData)
					: JSONData;

			var CSV = '';
			//Set Report title in first row or line

			CSV += ReportTitle + '\r\n\n';

			//This condition will generate the Label/Header
			if (ShowLabel) {
				var row = "";

				//This loop will extract the label from 1st index of on array
				for ( var index in arrData[0]) {

					//Now convert each value to string and comma-seprated
					row += index + ',';
				}

				row = row.slice(0, -1);

				//append Label row with line break
				CSV += row + '\r\n';
			}

			//1st loop is to extract each row
			for (var i = 0; i < arrData.length; i++) {
				var row = "";

				//2nd loop will extract each column and convert it in string comma-seprated
				for ( var index in arrData[i]) {
					row += '"' + arrData[i][index] + '",';
				}

				row.slice(0, row.length - 1);

				//add a line break after each row
				CSV += row + '\r\n';
			}

			if (CSV == '') {
				alert("Invalid data");
				return;
			}

			//Generate a file name
			var fileName = "MyReport_";
			//this will remove the blank-spaces from the title and replace it with an underscore
			fileName += ReportTitle.replace(/ /g, "_");

			//Initialize file format you want csv or xls
			var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

			// Now the little tricky part.
			// you can use either>> window.open(uri);
			// but this will not work in some browsers
			// or you will not get the correct file extension    

			//this trick will generate a temp <a /> tag
			var link = document.createElement("a");
			link.href = uri;

			//set the visibility hidden so it will not effect on your web-layout
			link.style = "visibility:hidden";
			link.download = fileName + ".csv";

			//this part will append the anchor tag and remove it after automatic click
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}

		$("#btnExport").click(function() {
			var data = JSON.stringify($('#tablef').datagrid('getData').rows);
			alert(data);
			if (data == '')
				return;

			JSONToCSVConvertor(data, "Download", true);
		});

出亂碼了看這裏

 

微信公衆號: codog代碼狗