Jqgrid表格控制元件匯出excel檔案
阿新 • • 發佈:2019-01-31
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") }