使用EasyUI datagrid-export.js导出Excel,适用于多级表头
原datagrid-export.js导出Excel只能导一级表头的Excel,因项目需要,对其进行了修改优化。
在js文件中,主要修改了toHtml方法。导出Excel步骤:先将datagrid的数据生成html的table,根据table样式导出到Excel文件。
1 function toHtml(target, rows, footer, caption){ 2 rows = rows || getRows(target); 3 rows = rows.concat(footer||getFooterRows(target)); 4 var dg = $(target); 5 var data = ['<table border="1" rull="all" style="border-collapse:collapse">']; 6 var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false)); 7 //获取所有列信息 8 var cc = dg.datagrid('options').columns; 9 /* 10 var columns = dg.datagrid('options').columns[0]; 11 var fields =[]; 12 var j = 0; 13 //剔除hidden为true的字段 14 for(var i=0;i<columns.length;i++){ 15 if(columns[i].hidden){} 16 else{ 17 fields[j]=columns[i].field; 18 j++; 19 } 20 } 21 */ 22 23 var trStyle = 'height:32px'; 24 var tdStyle0 = 'vertical-align:middle;padding:0 4px'; 25 if (caption){ 26 data.push('<caption>'+caption+'</caption>'); 27 } 28 //写入表头信息,先判断是否为多级表头 29 for(var j=0; j<cc.length; j++){ 30 data.push('<tr style="'+trStyle+'">'); 31 var cols = cc[j]; 32 for(var i=0; i<cols.length; i++){ 33 //判断是否未隐藏字段 34 if(cols[i].hidden == true){ 35 continue; 36 } 37 var tdStyle = tdStyle0 + ';width:'+cols[i].boxWidth+'px;'; 38 tdStyle += ';text-align:'+(cols[i].halign||cols[i].align||''); 39 //定义行列信息,初始化行和列的值为1 40 var colspans = 1; 41 var rowspans = 1; 42 if(cols[i].rowspan===undefined){ 43 }else{ 44 rowspans = cols[i].rowspan; 45 } 46 if(cols[i].colspan ===undefined){ 47 }else{ 48 colspans = cols[i].colspan; 49 } 50 data.push('<td style="'+tdStyle+'" colspan="'+colspans+'" rowspan="'+rowspans+'">'+cols[i].title+'</td>'); 51 } 52 data.push('</tr>'); 53 } 54 55 //原方法 56 /* 57 data.push('<tr style="'+trStyle+'">'); 58 for(var i=0; i<fields.length; i++){ 59 var col = dg.datagrid('getColumnOption', fields[i]); 60 var tdStyle = tdStyle0 + ';width:'+col.boxWidth+'px;'; 61 tdStyle += ';text-align:'+(col.halign||col.align||''); 62 data.push('<td style="'+tdStyle+'">'+col.title+'</td>'); 63 } 64 data.push('</tr>'); 65 */ 66 67 $.map(rows, function(row){ 68 data.push('<tr style="'+trStyle+'">'); 69 for(var i=0; i<fields.length; i++){ 70 var field = fields[i]; 71 var col = dg.datagrid('getColumnOption', field); 72 if(col.hidden == true){ 73 continue; 74 } 75 var value = row[field]; 76 if (value == undefined){ 77 value = ''; 78 } 79 var tdStyle = tdStyle0; 80 tdStyle += ';text-align:'+(col.align||''); 81 data.push( 82 '<td style="'+tdStyle+'">'+value+'</td>' 83 ); 84 } 85 data.push('</tr>'); 86 }); 87 data.push('</table>'); 88 return data.join(''); 89 }