Layui table合并单元格

最新推荐文章于 2024-07-25 10:24:34 发布

xyx_0300

最新推荐文章于 2024-07-25 10:24:34 发布

阅读量1.2k

点赞数

分类专栏： layui

原文链接：https://www.cnblogs.com/Kingram/p/9781682.html

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一种基于JavaScript的前端表格合并方法，通过解析数据并动态设置`rowspan`属性，实现不同列的单元格合并。函数`merge`用于处理多个表格，针对指定元素进行操作，适用于复杂的数据比较和表格格式化需求。

摘要由CSDN通过智能技术生成

table.render({
...
...
...
done: function (res, curr, count) {
     var columsName = ["De_Name", "Brand"];
       var columsIndex = [1, 2];
       var elem = "div[lay-id='dataTable_Client'] ";
       merge(res, columsName, columsIndex, elem);
   }
})

//合并单元格, elem 一个页面如果有多个表格可以指定某一个
function merge(res, columsName, columsIndex, elem) {
    if (elem === null) {
        elem = ".layui-table-body>.layui-table";
    } else {
        elem += ".layui-table-body>.layui-table";
    }

    var data = res.data;
    // 定位需要添加合并属性的行数
    var mergeIndex = 0;
    // 这里涉及到简单的运算，mark是计算每次需要合并的格子数
    var mark = 1;
    // 需要合并的列名称
    //var columsName = ['id', 'name']; 
    // 需要合并的列索引值
    //var columsIndex = [0, 1];
    for (var k = 0; k < columsName.length; k++) {
        // 这里循环所有要合并的列
        var trArr = $(elem).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;
    }
}