layui table 合并指定行数单元格

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

原创最新推荐文章于 2024-07-25 10:24:34 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #table

前端/angular/react 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于layui框架的Table组件中实现单元格按指定行数进行合并的方法。通过对原始单元格合并代码的改进，实现了更灵活的单元格合并功能，尤其适用于需要按固定行数进行合并的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui table 合并指定行数单元格

背景
- 实际需求如下：
最终代码

背景

layui table 单元格合并网上有很多代码，但是大多是基于值合并，这种方法会存在一个问题：单行数据被合并了。
如下面这个合并函数（来自：https://blog.youkuaiyun.com/qq_37424917/article/details/104749241）

/**
 * 
 * @param fieldName  要合并列的field属性值
 * @param index 表格的索引值 从1开始
 * @desc 此方式适用于没有列冻结的单元格合并
 */
function alarmTableRowSpan(fieldName, index) {
    var fixedNode = document.getElementsByClassName("layui-table-body")[index - 1];
    if (!fixedNode) {
        return false;
    }
    var child = fixedNode.getElementsByTagName("td");
    var childFilterArr = [];
    // 获取data-field属性为fieldName的td
    for (var i = 0; i < child.length; i++) {
        if (child[i].getAttribute("data-field") == fieldName) {
            childFilterArr.push(child[i]);
        }
    }
    // 获取td的个数和种类
    var childFilterTextObj = {};
    for (var i = 0; i < childFilterArr.length; i++) {
        var childText = childFilterArr[i].textContent;
        if (childFilterTextObj[childText] == undefined) {
            childFilterTextObj[childText] = 1;
        } else {
            var num = childFilterTextObj[childText];
            childFilterTextObj[childText] = num * 1 + 1;
        }
    }
    // 给获取到的td设置合并单元格属性
    for (var key in childFilterTextObj) {
        var tdNum = childFilterTextObj[key];
        var canRowSpan = true;
        for (var i = 0; i < childFilterArr.length; i++) {
            if (childFilterArr[i].textContent == key) {
                if (canRowSpan) {
                    childFilterArr[i].setAttribute("rowspan", tdNum);
                    canRowSpan = false;
                } else {
                    childFilterArr[i].style.display = "none";
                }
            }
        }
    }
}

上面代码的效果如下：
在这里插入图片描述

实际需求如下：

在这里插入图片描述

最终代码

我把上面函数修改了一下，修改结果如下。经过测试是OK的，如果是多列合并需要调用多次。

        /**
        * name layui合并tbody中单元格的方法
        *  fieldName  要合并列的field属性值
        *  index 表格的索引值 从1开始
        *  rowspan 合并几列
        *  此方式适用于没有列冻结的单元格合并
        */
        function alarmTableRowSpan(fieldName, index, rowspan) {
            var fixedNode = document.getElementsByClassName("layui-table")[index - 1];
            if (!fixedNode) {
                return false;
            }
            var child = fixedNode.getElementsByTagName("td");
            var childFilterArr = [];
            // 获取data-field属性为fieldName的td
            for (var i = 0; i < child.length; i++) {
                if (child[i].getAttribute("data-field") == fieldName) {
                    childFilterArr.push(child[i]);
                }
            }
            // 根据 rowspan 合并单元格数量！
            for (var i = 0; i < childFilterArr.length; i++) {
                if (i % rowspan == 0) {
                    childFilterArr[i].setAttribute("rowspan", rowspan);
                    canRowSpan = false;
                } else {
                    childFilterArr[i].style.display = "none";
                }
            }
            return true;
        };

用法，以自动渲染为例：性别相同的连续3行合并。

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test',done: function(){alarmTableRowSpan('sex', 1, 3)}}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>