欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 14:27:53
...

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");
                }
            });
相关标签: layui合并单元格