layui table 动态生成复杂表头 及 数据绑定问题

table复杂表头 

下面将是我们要实现的效果

下面是后台返回的数据 

 

 

 复杂表头重要的属性：

rowspan

colspan

需要注意的是循环生成表头时，循环时不会执行templet里面的代码，在table渲染时才会执行，如果直接在templet里用变量，那么取到的数据是有问题的，需要借助属性来避免这个问题。

由于table的数据是提前生成的，所以数据分页时有问题，不能展示数据实际总条数，目前还没有想到好办法，暂时先用了laypage实现了分页的效果

loadTableData(1, 10);
//初始化表格
function bindTable(columnArr,data,page,limit) {
    table.render({
        elem: '#dataTable'
        , where: { page: page, limit: limit }
        , height: 'full-155'
        , cols: columnArr
        , data: data
        , page: false
       
    });
}
//初始化分页
function initPage(count) {
    laypage.render({
        elem: 'demo1'
        , count: count //数据总数，从服务端得到
        , jump: function (obj, first) {
            //首次不执行
            if (!first) {
                loadTableData(obj.curr, obj.limit);
            }
        }
    });

}
var isInitPage = false;
//生成表头
function loadTableData(page,limit) {
    var columnArr = [];
    columnArr[0] = [
        { fixed: 'left', field: 'CityName', title: '城市', align: 'center', rowspan: 2, width: 200},
        { fixed: 'left', field: 'OrganName', title: '机构', align: 'center', rowspan: 2 ,width:200},
    ];
    columnArr[1] = [];
    $.ajax({
        url: "/Account/GetTGLs",
        type: 'post',
        dataType: "json",
        data: { trainTargetId: 1, page: page, limit: limit },
        success: function (json) {
            var data = json.workTypes;
            for (var i = 0; i < data.length; i++) {
                var workType = data[i];
                columnArr[0].push({ field: 'WorkTypeName', title: data[i].Name, align: 'center', colspan: 3 });
                columnArr[1].push({
                    field: 'TotalCount', title: '实考人数', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) {
                        var workTypeId = $(this)[0].data_workTypeId;
　　　　　　　　　　　　　　//注意：workType.WorkTypeId 此处是没办法直接取workType.WorkTypeId的。如果这样写，最终取到的数据将都是当前行最后一条的数据，只能借助属性进行操作

　　　　　　　　　　　　　　var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId); return `${workTypeData.TotalCount}`; } 
　　　　　　　　　　}); 
　　　　　　　　　　columnArr[1].push({ 
　　　　　　　　　　　　field: 'PassCount', title: '通过人数', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) { 
　　　　　　　　　　　　　　　var workTypeId = $(this)[0].data_workTypeId; var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId); 
　　　　　　　　　　　　　　　return `${workTypeData.PassCount}`; } 
　　　　　　　　　　　　}); 
　　　　　　　　　　columnArr[1].push({ 
　　　　　　　　　　　　field: 'PassRate', title: '通过率', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) {
 　　　　　　　　　　　　　　var workTypeId = $(this)[0].data_workTypeId; var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId); 
　　　　　　　　　　　　　　 return `${workTypeData.PassRate}`; } 
　　　　　　　　　　　　}); 
　　　　　　　　} 
　　　　　　　　bindTable(columnArr, json.data, page, limit); 
　　　　　　　　if (!isInitPage) { isInitPage = true; initPage(json.count); } 
　　　　} 
　　}) 
}