layui动态表格导出复杂表头

2021年1月19日
第一次导出动态表格复杂表头有点懵逼,一直百度都不符合要求,知道找到一篇文章终于解决我的问题。这边有个简单的文档可以看下:http://excel.wj2015.com/

以下是我自己总结的解决办法(需下载excel.js文件):

链接:https://pan.baidu.com/s/1VxjLtuphLTiAxUlNwYKnKA 提取码:gxqz
此为引用 创建者: songyinan

第一(动态表格):
自定义表格(复杂表头)

function initHeader(){
    var header1 = []
       ,header2 = [];
    //第一行标题   
    header1.push({title:'序号',type:'numbers',rowspan:2})
    header1.push({field:'DisName',title:'渠道名称',minWidth:150,rowspan:2,totalRowText:'合计'});
    header1.push({title:'支出',colspan:2});
    header1.push({title:'收入',colspan:2});
    header1.push({field:'RemainMoney',title:'金额',minWidth:90,rowspan:2});
    //第二行标题
    header2.push({field:'CustomerName',title:'终端名称',minWidth:180});
    header2.push({field:'SettleMoney',title:'结算金额',minWidth:70,totalRow:true});
    header2.push({field:'PaymentName',title:'回款类型',minWidth:60});
    header2.push({field:'ReceivedMoney',title:'回款金额',minWidth:70,totalRow:true});
    
    header.push(header1);
    header.push(header2);

}

第二(初始化表格):

$.ajax({
       type:"POST",
       url:访问的Url,
       contentType:"application/x-www-form-urlencoded;charset=utf-8",
       dataType:"json",
       data:{
        	//参数
       },
       async: true,//异步
       success:function(res)
       {
       	//成功后初始化表格
         var result = res.data;
          exportData = result;//赋值给导出的数据
          departTable.reload({
                elem: '#departTable'
                ,cols: header
                ,data: result
                ,id:'departTable'
                ,page:true
                ,limit: 20//任何你限制的数量
                ,totalRow:true
            });
       }
   });

第三(导出):

//设置导出字段
     exportData = excel.filterExportData(exportData, {
            RowNumber: 'RowNumber'
            ,DisName: 'DisName'
            ,CustomerName: 'CustomerName'
            ...
            //需要导出的字段
        });
                
    //设置导出表头
    exportData.unshift({
        CustomerName: '终端名称'
        ,SettleMoney: '结算金额'
        ,PaymentName:'回款类型'
        ,ReceivedMoney:'回款金额'
     })

    exportData.unshift({
         RowNumber: '序号'
        ,DisName: '渠道名称'
        ,CustomerName: '支出'
        ,SettleMoney: ''
        ,PaymentName:'收入'
        ,ReceivedMoney:''
        ,RemainMoney:'余额'
     })

        //合并单元格
         var mergeConf = excel.makeMergeConfig([
            ['A1', 'A2'],
            ['B1', 'B2'],
            ['C1', 'C2']
            ...
        ])
         //设置样式
     excel.setExportCellStyle(exportData, 'A1:I2', { //A1-I2是范围区间
      	    s: {
      	      //设置居中  
      	        alignment: {
      	            horizontal: 'center',
      	            vertical: 'center'
      	        }
      	    }
      	}, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
      	    // 回调参数,cell:原有数据,newCell:根据批量设置规则自动生成的样式,
      	    //row:所在行数据,config:传入的配置,currentRow:当前行索引,currentCol:当前列索引,fieldKey:当前字段索引
      		return  newCell ;
      	} );
            //设置导出文件单元格宽度
            //可以避免因单元格数据长度过长,显示科学计数法
           var colConf =  excel.makeColConfig({
                'A': 30,
                'B': 150,
                'C': 100,
                'D': 150,
                'E':100,
                'F':100
                ...
                }, 60)
                
                
             excel.exportExcel({
						sheet1: exportData
					}, excel标题+'.xlsx', 'xlsx',{
                extend: {
                    sheet1: {
                        '!merges': mergeConf,
                        '!cols': colConf
                    }
                }
            });
  })
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页