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

深碍√TFBOYSˉ_ 2021-11-09 05:36 885阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNjYwMTgy_size_16_color_FFFFFF_t_70][]

转成

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNjYwMTgy_size_16_color_FFFFFF_t_70 1][]

本来是用的layui的第三方组件实现的，组件为：[tableMerge 表格自动合 。][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);
                }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNjYwMTgy_size_16_color_FFFFFF_t_70]: /images/20211109/888f95ec19e2488d8584acd642eecffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNjYwMTgy_size_16_color_FFFFFF_t_70 1]: /images/20211109/a8b95f4f6b434c19a2ff3edd57db6ada.png
[tableMerge _]: https://fly.layui.com/extend/tableMerge/