layui合并单元格(此方式适用于没有列冻结的单元格合并)

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

脾气哦169

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

阅读量508

点赞数

分类专栏： layui合并单元格文章标签： layui合并单元格

本文链接：https://blog.csdn.net/qq_41609150/article/details/102911595

版权

layui合并单元格专栏收录该内容

1 篇文章 0 订阅

订阅专栏

layui合并单元格(此方式适用于没有列冻结的单元格合并)

     /**
     * name layui合并tbody中单元格的方法
     * @param fieldName  要合并列的field属性值往后面加可以传多个属性名称
     * @param index 表格的索引值 从1开始
     */
    function layuiRowspan(fieldName, index, fieldName2) {
        // 左侧列为冻结的情况
        //  var tbodyNode = document.getElementsByClassName("layui-table-fixed-l")[index-1];
        // 左侧导航栏不冻结的情况
        var tbodyNode = document.getElementsByClassName("layui-table-body")[index - 1];
        var child = tbodyNode.getElementsByTagName("td");
        var childFilterArr = [];
        var childFilterArr2 = [];
        // 获取data-field属性为fieldName的td
        for (var i = 0; i < child.length; i++) {
            if (child[i].getAttribute("data-field") === fieldName) {
                childFilterArr.push(child[i]);
            }
            if (child[i].getAttribute("data-field") === fieldName2) {
                childFilterArr2.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);
                        childFilterArr2[i].setAttribute("rowspan", tdNum);
                        canRowspan = false;
                    } else {
                        childFilterArr[i].style.display = "none";
                        childFilterArr2[i].style.display = "none";
                    }
                }
            }
        }
    }

           //在layui表格
           //展示已知数据
            table.render({
                elem: '#AuthBindingTable'
                , height: "full-250"
                , cols: columns
                , data: data
                , page: true//是否显示分页
                , limit: 40
                , toolbar: 'true'
                , limits: [40, 50, 60, 70]
                , done: function (res, curr, count) {
                    //就行回调处理合并单元格
                    layuiRowspan("odCode", 1, "name");
                }
            });