前端-layui动态渲染表格行列与复杂表头合并

说在前面：

最近一直在用layui处理表格

写的有些代码感觉还挺有用的，顺便记录下来方便以后查看index.php/tags-602.html" >使用；

HTML处代码

拿到id 渲染位置表格

CSS

  .layui-table th {             background-color: rgb(199 217 234 / 78%); /* 设置表头的背景颜色 */             color: #2e2e2e; /* 设置表头的文本颜色 */             font-weight: bold;         }        .layui-table tbody tr:nth-child(odd) {            background-color: #ffffff; /* 设置奇数行的背景颜色 */        }        .layui-table tbody tr:nth-child(even) {            background-color: rgba(239, 239, 239, 0.94); /* 设置偶数行的背景颜色 */        }        .layui-table td, .layui-table th {            border: 1px solid #e6e6e6; /* 边框颜色 */        }        .layui-table td, .layui-table th {            border-width: 2px; /* 设置双边框效果 */        }

重点来了

JS代码

var backData = {};var backData3 = {};layui.use('table', function () {    getStudentTaskData()    function getStudentTaskData() {        ajaxBase.getSelectInfo(false, function (jsonData) {            if (jsonData['单据json']) {                backData = jsonData['代扣项目'];                backData3 = jsonData['工资薪酬计算表'];            }        })    }    var datas = []    $.each(backData3, function (index, item) {        var coll = {};        for (key in item) {            coll[key.split("、")[1]] = item[key];        }        datas.push(coll);    })    var table = layui.table;    var colLists = [];    for (key in backData[0]) {        var colList = {};        colList['field'] = key;        colList['title'] = key;        colList['align'] = 'center';        colList['minWidth'] = '122';        colLists.push(colList);    }    colLists.sort();    // 渲染    table.render({        elem: '#ID-table-demo-parse'        , data: backData        , cols: [colLists]        , height: 100    });    colLists = [];    var colls = [];    const site = 0;    var colList = {};    for (key in backData3[0]) {        colList[key.split("、")[0]] = key.split("、")[1]    }    for (key in colList) {        var coll = {};        if (colList[key].includes('代扣项目')) {            coll['field'] = colList[key];            coll['edit'] = 'text';            coll['title'] = colList[key].split("-")[1];            coll['align'] = 'center';            colls.push(coll);            // colLists.push(coll);        } else {            coll['field'] = colList[key];            coll['title'] = colList[key];            coll['edit'] = 'text';            coll['rowspan'] = 2;            coll['align'] = 'center';            colLists.push(coll);            if (colList[key].includes('收入总额')) {                var colll = {};                colll['field'] = '代扣项目';                colll['title'] = '代扣项目';                colll['align'] = 'center';                colll['colspan'] = 5;                colLists.push(colll);            }        }    }    //console.log('colLists', colLists)    // 渲染    table.render({        elem: '#ID-table-salary-parse'        , data: datas        , cols: [colLists, colls]        , height: 350    });});

合并表头需要在

cols中传入[ [ ],[ ] ]这种数组类型的格式；

主要就是不合并的表头都加上rowspan:2（代表行跨度为2）

colspan:5 表示第二个数组需要合并的表格个数；

完成效果图：

小程序演示地址：

点击演示