layui多表格单元格合并

               

 

 

 

 

今天多表格合并时显示就乱了，就修改了下

这个合并最开始@Kingram  编写

初始

        //layui 结束
        //合并开始
        function merge(res)
        {
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var _number = 1;//保持序号列数字递增
            var columsName = ['一级指标', '二级指标'];//需要合并的列名称
            var columsIndex = [1, 2];//需要合并的列索引值
            var mergeCondition = 'id';//需要合并的 首要条件  在这个前提下进行内容相同的合并
            var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr
            var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr

            for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    if (data[i][mergeCondition] === data[i - 1][mergeCondition]) {
                        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;//一旦前后两行的值不一样了，那么需要合并的Uriririri子数mark就需要重新计算
                    }
                }
                mergeIndex = 0;
                mark = 1;
            }
            //操作左右定位列的表格
            $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"), function (i, v) {
                if ($(v).find('td').eq(2).css('display') === 'none') {
                    tdArrL.eq(i).find('td').css('display', 'none');
                    tdArrR.eq(i).find('td').css('display', 'none');
                } else {
                    tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);
                    tdArrL.eq(i).find('td').css('height', $(v).find('td').eq(2)[0].clientHeight);
                    tdArrR.eq(i).find('td').css('height', $(v).find('td').eq(2)[0].clientHeight);
                }
            })
        }

修改后

 //layui 结束
        //合并开始
        function merge(res,value)//value为你table的id名称，
        {
                var data = res.data;
                var mergeIndex = 0;//定位需要添加合并属性的行数
                var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
                var _number = 1;//保持序号列数字递增
                var columsName = ['一级指标', '二级指标'];//需要合并的列名称
                var columsIndex = [0, 1];//需要合并的列索引值
                var mergeCondition = 'id';//需要合并的 首要条件  在这个前提下进行内容相同的合并
                var tdArrL = $('.layui-table-fixed-l >[lay-id=table' + value + '] .layui-table-body').find("tr");//序号列左定位产生的table tr
                var tdArrR = $('.layui-table-fixed-r >[lay-id=table' + value + '] .layui-table-body').find("tr");//操作列定右位产生的table tr
               //var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr
               //var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr

                for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                    var trArr = $('[lay-id=table' + value + '] .layui-table-body').find("tr")// $(".layui-table-main>.layui-table").find("tr");//所有行
                    var a = $(".layui-table-main>.layui-table").find("tr");
                   // console.log($(".layui-table-main>.layui-table").find("tr"));
                  //  console.log($('[lay-id=table' + value + '] .layui-table').find("tr"));
                    for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                        if (data[i][mergeCondition] === data[i - 1][mergeCondition]) {

                            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;//一旦前后两行的值不一样了，那么需要合并的Uriririri子数mark就需要重新计算
                        }
                    }
                    mergeIndex = 0;
                    mark = 1;
                }
                // 操作左右定位列的表格
                $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"), function (i, v) {
                    if ($(v).find('td').eq(2).css('display') === 'none') {
                        tdArrL.eq(i).find('td').css('display', 'none');
                        tdArrR.eq(i).find('td').css('display', 'none');
                    } else {
                        tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);
                        tdArrL.eq(i).find('td').css('height', $(v).find('td').eq(2)[0].clientHeight);
                        tdArrR.eq(i).find('td').css('height', $(v).find('td').eq(2)[0].clientHeight);
                    }
                })
        }