使用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     }

 

使用EasyUI datagrid-export.js导出Excel,适用于多级表头

上一篇:T-SQL基础(五)之增删改


下一篇:浏览器渲染——html页面外联script会阻塞页面渲染吗?