layui数据表格合并行，并且不影响重载

今天渲染页面的时候碰到一个问题，就是表格行合并的问题。大概如下：

转成

 本来是用的layui的第三方组件实现的，组件为：tableMerge 表格自动合 。

但是该组件有个问题是无法重载表格，因为如果你给数据表格加上id的话，就会没有合并的效果，具体原因未知。于是又在网上寻觅答案，发现可以用另一种方法解决这种尴尬局面。

自定义方法：

 //layui数据表格合并行
        function merge(res) {

            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = ['id','name'];//需要合并的列名称
            var columsIndex = [0,1];//需要合并的列索引值

            for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                var trArr = $(".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;
            }
        }

 然后再使用layui table模块的done参数。调用此方法
 

 // done - 数据渲染完的回调
            // 类型：Function，默认值：无
            // 无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。
            , done: function (res,curr,count) {
                merge(res);
            }

 然后就可以了，也不会影响表格重载了。