layUI table表格合并

尽管layUI已经渐渐退出用户的视野，但是一些仍然健在的项目，在维护中，依旧需要解决写问题。今天就来看看layUi的表格合并。我也是查找了好的资料看到的一个解决办法，出处现在不记得了。（如有疑虑。记得留言哇）。

如下，就是整个合并需要的代码了。

function merge(res) {
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = ['num','number','purchase_id','deal_time','business_name','shoppers','shoppers_phone',
                'destination','address','amount','discounts','true_pay','payed_type'];//需要合并的列名称
            var columsIndex = [0,1,2,8,9,10,11,12,13,14,15];//需要合并的列索引值
            //需要合并的 主要条件  在这个前提下进行内容相同的合并(因为合并内容复杂，在这里就写两个条件)
            var mergeCondition1 = 'commodity_id';
            // var mergeCondition2 = 'purchaser';

            for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                var trArr = $(".layui-table-main>.layui-table").eq(4).find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    if (data[i][mergeCondition1] === data[i-1][mergeCondition1]) {
                        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就需要重新计算
                        }
                    } else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
                mergeIndex = 0;
                mark = 1;
            }
        }

 怎么用呢，也是相当的简单。在你表格渲染。即

table.render({}）最后，使用done：function(res){merge(res);}

table.render({
            elem: '#LAY_table_user'
            , url: ''
            , cols: []
            , id: 'LAY_table_user'
            ,done : function(res) {
                merge(res);
            }
        });

需要改动的就是merge()内部的columsName和columsIndex，就是你表格内容对应的字段和内容。剩下的自己看着修改就好。