layui 列合并相同内容

    table.render({
                elem: '#tbdata',
                method: 'post',
                data: jsonData,
                height: temphei,
                limit: 20,
                limits: [10, 20, 30, 50, 100, 300, 500],
                id: "tbdata",
                toolbar: "#tbdatabar",
                text: {
                    none: '暂无相关数据'
                },
                cols: [
                    [{
                            field: "number",
                            title: "序号",
                            width: "6%",
                            align: "left",
                            templet: function(data) {
                                return data.LAY_INDEX
                            }
                        }
                        , {
                            field: 'bh',
                            title: '<span style=\'color:#c00\'></span>test1',
                             width: '15%', 
                            templet: function(res) {
                        
                                return '&nbsp;' +
                                    '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pmfabh">' +
                                    res.pmfabh +
                                    '</button>' ;
                            }
                        } 
                        
                        ,  {
                            field: "createtime",
                            title: "创建时间",
                            width: "10%",
                            align: "left"
                        }

                    ]
                ],
                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        ,
                    groups: 10 //只显示 1 个连续页码
                    /*      , first: false //不显示首页
                          , last: false //不显示尾页*/
                },
                done: function(res) { //当数据渲染完后，执行的回调
               //设置背景颜色
                        layer.closeAll();
                        merge(res);
                    }
                    //,skin:'line'//设置表格边框  line： 行边框风格   row：列边框风格  nob：无边框风格

                ,
                size: 'sm' //设置表格尺寸  sm: 小尺寸  lg： 大尺寸
            });

方法：

        /**  相同内容合并
         * @param {Object} res
         */
        function merge(res) {
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = ['bh'];//需要合并的列名称
            var columsIndex = [1,2];//需要合并的列索引值
        
            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 列合并相同内容

推荐阅读