【WEB前端开辟】layui动态表格之兼并单元格

需求:

下面用excel表格也许模仿下需求,左侧是本来的,要改成右侧如许的:

①第一步:再生成表格后挪用此要领,以兼并反复的单元格

done : function(res, curr, count) {
        merge(res);
 }

②第二步:编写这个要领:

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框架学问请关注layui框架。

以上就是layui动态表格之兼并单元格的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注