layui 合并单元格

之前做项目的时候有一个需求，就是需要第一列数据部分合并单元格展示，如下：

使用layui完成，表头是通过后台获得的。
layui表格初始化后，在done中执行merge方法。

table.render({
                elem: position
                , method: 'get'
                , url: ''
                , where: {
                    id: id,
                    tableName: status,
                    paId: paId,
                }
                , height: 'full-260'
                , cellMinWidth: 101 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [mycars]
               , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                   return {
                       "code": res.code, //解析接口状态
                       "msg": res.msg, //解析提示文本
                       "count": res.count, //解析数据长度
                       "data": res.data //解析数据列表
                   };
               },
                done: function (res, curr, count) {
                    merge(res);//合并列
                },
            });

//layui数据表格合并行
    function merge(res) {
        debugger;
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['SubName'];//需要合并的列名称
        var columsIndex = [0];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-show>.layui-table-view>.layui-table-box>.layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                } else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }

最后的展示如图：