利用jquery插件table2excel导出多个layui复杂多级表头

需求场景：

有一个统计数据列表，需要按照每十项一个表格，展示成如下图多个复杂表头的表格。每达到十个，就在表格下方生成一个新的表格。使用layui的多级表格生成表格。最终需要将全部表格做合并导出，并且要体现多级表头。直接使用layui表格的导出有两个问题 1、不支持合并导出 2、导出的多级表头无法展示直接使用table2excel 无法直接导出layui格式的表格，只能导出普通的table

解决方案：

采用将layui-table转换为普通table后，将其合并，再使用table2Excel的方式进行导出

一、表格结构在表格下方增加一个用来存放合并导出表格的div

<!-- 统计表格 -->
<div class="inline fields" id="tableDiv" style="display:block">
    <table>
        <tr><td colspan="5">暂无数据</td></tr>
    </table>
</div>
<div id="exportTableDiv" style="display:none">
    <table id="exportTable">
        <tbody>
        </tbody>
    </table>
    <table id="exportChartTable">
        <tbody>
        </tbody>
    </table>
</div>

二、动态渲染表格数据有多少个table数据，就渲染多少个table 在done回调函数中，将对应表格处理成普通的table

// 获取到的表格数据
var tableDataList=data.tableDataList;
// 动态生成表格html
var tableHtml="";
// 记录表格数量
tableDataSize=tableDataList.length;
// 先清空html
$("#tableDiv").html("");
for(var i in tableDataList){
    tableHtml+="<table id='table"+i+"'></table>";
}
if(!tableHtml){
    tableHtml="<table class='layui-table' style='height: 400px;'><tr><td style='text-align: center'>暂无数据</td></tr></table>"
}
// 填充html
$("#tableDiv").html(tableHtml);
// 1、循环渲染表格数据
 for(var i in tableDataList){
     // 获取表格数据
     var tableData=tableDataList[i];
     // 获取表头
     var cols=tableData.cols;
     // 获取表格数据
     var dataList=tableData.dataList;
     layui.use('table', function () {
         var table = layui.table;
         table.render({
             elem: '#table'+i,
             cols: [
                 cols[0],
                 cols[1]
             ],
             data: dataList,
             // 表格渲染完后的回调
             done: function () {
                 let header_tr = $("#table"+i).next().find(".layui-table-header").find("tr");
                 let body_tr = $("#table"+i).next().find(".layui-table-body").find("tr");
                 let header_html = "";
                 let body_html = "";
                 // 获取表头html，包括单元格的合并
                 $.each(header_tr,function (i,tr) {
                     let header_th = $(tr).find("th");
                     header_html += "<tr>";
                     $.each(header_th,function (j,th) {
                         let rowspan_num = $(th).attr("rowspan");// 行合并数
                         let colspan_num = $(th).attr("colspan");// 列合并数
                         if (rowspan_num && !colspan_num){// 只有行合并时
                             header_html += '<th rowspan= "'+ rowspan_num +'">';
                         } else if (colspan_num && !rowspan_num){// 只有列合并时
                             header_html += '<th colspan= "'+ colspan_num +'">';
                         } else if (rowspan_num && colspan_num){// 行列合并均有时
                             header_html += '<th rowspan= "'+ rowspan_num +'" colspan="'+ colspan_num +'">';
                         } else {// 没有发生单元格合并
                             header_html += '<th>';
                         }
                         header_html += $(th).children().children().text() + '</th>';// 获取表头名称并拼接th标签
                     })
                     header_html += '</tr>';
                 })
                 // 获取表格body数据
                 $.each(body_tr,function (i,tr) {
                     let body_td = $(tr).find("td");
                     body_html += '<tr>';
                     $.each(body_td,function (j,td) {
                         body_html += '<td>' + $(td).children().text() + '</td>';
                     })
                     body_html += '</tr>';
                 })
                 $("#table"+i+" tr").remove();// 清除之前的doom结构
                 $("#table"+i).append(header_html).append(body_html);
                 $("#table"+i).hide();
             }
         });
     });
 }

三、在导出方法中，将普通table的内容合并到导出table中，再调用table2excel插件导出表格

function exportTable(){
       layer.confirm('确认导出统计表格吗?', {icon: 3, title:'提示',shadeClose:false,shade: [0],offset:'150px'}, function(){
           var deptName = $("#deptId").parent().dropdown('get text');
           var startTime =$("#startTime").val();
           var endTime =$("#endTime").val();
           var title=startTime+"至"+endTime+deptName+"护理质量督查统计表";
           // 先清空数据
           $("#exportTable tbody").html("");
           // 合计表格数据
           for(var i=0;i<tableDataSize;i++){
               // 获取当前下标表格数据
               var curTbodyHtml=$("#table"+i).find("tbody").html();
               // 添加到导出表格中
               $("#exportTable tbody").append(curTbodyHtml);
           }
           $("#exportTable").table2excel({  //表格ID
               exclude: ".noExl",
               name: "Excel Document Name",
               filename: title,  //名称
               exclude_img: true,
               exclude_links: true,
               exclude_inputs: true,
               cols:$("#exportTable tr th").length //列名
           });
           layer.closeAll();
       });
}

四、导出结果