layui的table表格行内合并js探讨

Question

直接说需求吧，layuitable已经满足很多复杂表格，但是有些用户设计表格比较个性，涉及到表格数据（非表头）的合并。这里我给出一个js供大家研究探讨。

tableCombine.js文件需要在页面中额外引入

/* 2019-05-06
*table tbody合并单元格
*/
function merges(data, indexs, fields,tableid) {
for (var i = 0; i < indexs.length; i++) {
    merge(data, indexs[i], fields[i],tableid);
}
var $trs = $("div[lay-id='"+tableid+"']>.layui-table-box>.layui-table-fixed-l>.layui-table-body>.layui-table tr");
$trs.find('[del="true"]').remove();
console.log($trs);
}

function merge(data, index, field,tableid) {
var $trs = $("div[lay-id='"+tableid+"']>.layui-table-box>.layui-table-fixed-l>.layui-table-body>.layui-table tr");
console.log($trs);
var lastValue = data[0][field], spanNum = 1;
for (var i = 1; i < data.length; i++) {
    if (data[i][field] == lastValue) {
        spanNum++;
        if (i == data.length - 1) {
            $trs.eq(i - spanNum + 1).find('td').eq(index).attr('rowspan', spanNum);
            for (var j = 1; j < spanNum; j++) {
                $trs.eq(i - j + 1).find('td').eq(index).attr('del', 'true');
            }
        }
    } else {
        $trs.eq(i - spanNum).find('td').eq(index).attr('rowspan', spanNum);
        for (var j = 1; j < spanNum; j++) {
            $trs.eq(i - j).find('td').eq(index).attr('del', 'true');
        }
        spanNum = 1;
        lastValue = data[i][field];
    }
  }
}

页面里：

            table.render({
            elem: '#demo_table'
            , height: 'full-170'
            , url: '../data/demo.json'
            , page: true //开启分页
            , cols: [[ //表头
                { field: 'id', fixed: 'left', width: 50, align: 'center', title: '序号' }
                , { field: 'ziduan', fixed: 'left', width: 200, align: 'center',  title: '字段' }
                , { field: 'ziduan', align: 'center', title: '字段' }
                , { field: 'ziduan', align: 'center', title: '字段' }
            ]],
            done: function (res, curr, count) {
                merges(res.data, [0, 1, 2], ['id', 'ziduan', 'ziduan'], 'demo_table')
            }
        });

使用文档：
1、tableCombine.js直接引用到页面里
2、在layui组件里elem: '#demo_table'的id应与done回调最后的'demo_table'一致，否则报错。
3、merges中的[0, 1, 2]是要合并的字段序列由左到右。
4、关键点一：要合并的列一定要浮动锁定fixed: 'left',否则报错。
5、关键点二：不能跳列锁定，如第0列锁 第1列不锁 第2列锁，也报错。

希望与大神交流再优化。放个效果图

参考内容：https://blog.csdn.net/qq_2670...