1. 程式人生 > >Jqgrid表格控制元件匯出excel檔案

Jqgrid表格控制元件匯出excel檔案

Jqgrid匯出excel實現思路:

1、根據jqgrid表頭樣式,使用jquery獲取表頭樣式。為保證對合並單元格表頭的相容,實現中沒有使用到jqgrid原聲api獲取colName等資訊。

2、匯出檔案內容使用xml格式檔案。

3、在前頭頁面生成檔案內容,然後將生成檔案內容傳送到服務端,由服務端生成檔案下載。(也有很多直接使用前臺下載方式,前臺下載目前大多具有瀏覽器限制問題)


/**
 * Jqgrid匯出功能擴充套件
 * @param gridTable id
 * @param fileName  檔名
 * @param tagIndex  標識列
 */
function exportExcel(gridTable,fileName,tagIndex){
	var rownumbers = $("#"+gridTable).jqGrid("getGridParam","rownumbers");
	//獲取class包含ui-jqgrid-htable,平且aria-labelledby屬性值為gbox_gridTable的table元素
	var titleTable=$('table.ui-jqgrid-htable[aria-labelledby="gbox_'+gridTable+'"]');
	//在table元素中查詢可見的tr或td節點
	var titleRows=titleTable.find('tr:not([aria-hidden="true"])');
	var header = [],response = [];
	var colIds = [];
	if(titleRows!=null && titleRows.length>0){
		for(var i=0 ; i < titleRows.length; i++){
			header.push("<Row>");
			var row=titleRows[i];
			$(row).find('td:visible,th:visible').each(function(index,element){
				if(true==rownumbers && 0===index){
					return ;
				}
				var colspan = $(this).prop('colspan');
				colspan=(colspan!=undefined)?(colspan-1):0;
				var rowspan = $(this).prop('rowspan');
				rowspan=(rowspan!=undefined)?(rowspan-1):0;
				header.push('<Cell ss:MergeAcross="'+colspan+'" ss:MergeDown="'+rowspan+'" ss:StyleID="s17"><Data ss:Type="String"><![CDATA[' + $(this).text() + ']]></Data></Cell>');
				if((i+1)==titleRows.length){
					colIds.push($(this).prop('id').replace(gridTable+'_',''));
				}
			});
			header.push("</Row>");
		}
	}
	var url=$("#"+gridTable).jqGrid('getGridParam', 'url');
	var userData=$("#"+gridTable).jqGrid("getGridParam","postData");
	var records=$("#"+gridTable).jqGrid('getGridParam', 'records');
	userData['page']=1;
	userData['rows']=(records!=undefined && records!='undefined')?records:-1;
	$.post(sy.contextPath +url,userData,function(data){
		if(data!=undefined && data!=null){
			var excelData=null;
			if(data instanceof Array){
				excelData=formatterDataRow(data,colIds,tagIndex);
			}else{
				excelData=formatterDataRow(data.rows,colIds,tagIndex);
			}
			excelData= excelData!=null?excelData:'';
			
			var excel=createExcelData(fileName,header.join('\n'),excelData);
			console.info(excel);
		}
		
	},'json');
	
	
}

function formatterDataRow(list,rowIndexs,status){
	var response = [];
	if(list!=null && list.length>0){
		for(var i=0;i<list.length;i++){
			var item=list[i];
			response.push("<Row>");
			for (var j = 0; j < rowIndexs.length; j++) {
				var column = rowIndexs[j];
				if('add'==item[status] && j==0){
					response.push('<Cell ss:StyleID="s22"><Data ss:Type="String"><![CDATA[' + (item[column]!=undefined?item[column]:'') + "]]></Data></Cell>")
				}else if('delete'==item[status] && j==0){
					response.push('<Cell ss:StyleID="s21"><Data ss:Type="String"><![CDATA[' + (item[column]!=undefined?item[column]:'') + "]]></Data></Cell>")
				}else if('update'==item[status]){
					response.push('<Cell ss:StyleID="s20"><Data ss:Type="String"><![CDATA[' + (item[column]!=undefined?item[column]:'') + "]]></Data></Cell>")
				}else{
					response.push('<Cell ss:StyleID="s18"><Data ss:Type="String"><![CDATA[' + (item[column]!=undefined?item[column]:'') + "]]></Data></Cell>")
				}
			}
			response.push("</Row>")
		}
	}
	return response.join('\n');
}

function createExcelData(sheetName,header,response){
	var styles=[];
	styles.push('<Styles>');
	styles.push('<Style ss:ID="Default" ss:Name="Normal"> <Alignment ss:Vertical="Bottom"/> <Font ss:FontName="宋體" x:CharSet="134" ss:Size="11" ss:Color="#000000"/> </Style>');
	styles.push('<Style ss:ID="s17"> <Alignment ss:Vertical="Center"/> <Borders> <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/><Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/></Borders><Font ss:FontName="宋體" x:CharSet="134" ss:Size="12" ss:Color="#000000" ss:Bold="1"/></Style>');
	styles.push('<Style ss:ID="s18"> <Borders> <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/> </Borders> <Font ss:FontName="宋體" x:CharSet="134" ss:Size="12" ss:Color="#000000"/> </Style>');
	styles.push('<Style ss:ID="s20"> <Borders> <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/> </Borders> <Font ss:FontName="宋體" x:CharSet="134" ss:Size="12" ss:Color="#000000"/> <Interior ss:Color="#FFFF00" ss:Pattern="Solid"/></Style>');
	styles.push('<Style ss:ID="s21"> <Borders> <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/> </Borders> <Font ss:FontName="宋體" x:CharSet="134" ss:Size="12" ss:Color="#000000"/> <Interior ss:Color="#FF0000" ss:Pattern="Solid"/></Style>');
	styles.push('<Style ss:ID="s22"> <Borders> <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/> <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/> </Borders> <Font ss:FontName="宋體" x:CharSet="134" ss:Size="12" ss:Color="#000000"/> <Interior ss:Color="#00B050" ss:Pattern="Solid"/></Style>');
	styles.push('</Styles>');
	
	var excelDoc = ['<?xml version="1.0"?>', 
	'<?mso-application progid="Excel.Sheet"?>', 
	'<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"', 
	' xmlns:o="urn:schemas-microsoft-com:office:office"', 
	' xmlns:x="urn:schemas-microsoft-com:office:excel"', 
	' xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"', 
	' xmlns:html="http://www.w3.org/TR/REC-html40">',
	styles.join('\n'),
	'<Worksheet ss:Name="', sheetName, '">', "<Table>", header, response, "</Table>", "</Worksheet>", "</Workbook>"];
	
	excelDoc.push();
	
	return excelDoc.join("\n")
	
}