layui表格合并的方法

这篇具有很好参考价值的文章主要介绍了layui表格合并的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

摘自文章: layui表格合并_忘记昵称了的博客-CSDN博客_layui 表格合并 

NO.1:根据field来自动合并 ,可以根据每个头数据来合并

缺点:一个页面中有超过一个表格,只能合并一个表格

layui table 合并单元格,layui,layui,servlet,javascript,前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- layui -->
    <link rel="stylesheet" href="layui/css/layui_base.css">
    <script type="text/javascript" src="layui/layui.js"></script>

    <script src="js/jquery-2.1.0.min.js"></script>

    <title>Document</title>
</head>

<body>
    <table class="layui-table" lay-filter="videoTable" id="videoTable"></table>

    <script>

        let table, layer;

        let videoData = [
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-S4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 2,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-H4-B3"
            }
        ];

        let colsListFalse = [
            { type: 'checkbox', fixed: 'left' },
            { field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
            { field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
            { field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
            { field: 'type', title: '设备类型', align: 'center' },
            { field: 'number', title: '设备数量', align: 'center' }
        ];

        layui.use('layer', function () {
            layer = layui.layer;
            render();
        });

        // 表格
        function render() {
            layui.use('table', function () {
                table = layui.table;

                table.render({
                    elem: '#videoTable',
                    data: videoData,
                    height: '410',
                    width: '100%',
                    defaultToolbar: [],
                    cellMinWidth: 100,
                    cols: [colsListFalse],
                    page: true, //是否显示分页
                    limits: [10, 100, 1000, 2000],
                    page: {
                        count: videoData.length,
                        prev: '上一页',
                        next: '下一页',
                        layout: ['prev', 'page', 'next', 'count', 'limit']
                    },
                    done: function (res, curr, count) {
                        layuiRowspan(['privilegeList', 'deviceAmount', 'newDeviceAmount'], 1); //调用合并表格的方法
                    }
                });
            });
        }

        var layuiRowspan = function (fieldNameTmp, index, flag) {
            let fieldName = [];
            if (typeof fieldNameTmp == "string") {
                fieldName.push(fieldNameTmp);
            } else {
                fieldName = fieldName.concat(fieldNameTmp);
            }
            for (let i = 0; i < fieldName.length; i++) {
                execRowspan(fieldName[i], index, flag);
            }
        };

        var execRowspan = function (fieldName, index, flag) {
            // 1为不冻结的情况,左侧列为冻结的情况
            let fixedNode = index == "1" ? $(".layui-table-body")[index - 1] : (index == "3" ? $(".layui-table-fixed-r") : $(".layui-table-fixed-l"));
            // 左侧导航栏不冻结的情况
            let child = $(fixedNode).find("td");
            let childFilterArr = [];
            // 获取data-field属性为fieldName的td
            for (let i = 0; i < child.length; i++) {
                if (child[i].getAttribute("data-field") == fieldName) {
                    childFilterArr.push(child[i]);
                }
            }
            // 获取td的个数和种类
            let childFilterTextObj = {};
            for (let i = 0; i < childFilterArr.length; i++) {
                let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
                if (childFilterTextObj[childText] == undefined) {
                    childFilterTextObj[childText] = 1;
                } else {
                    let num = childFilterTextObj[childText];
                    childFilterTextObj[childText] = num * 1 + 1;
                }
            }
            let canRowspan = true;
            let maxNum = 9999;
            for (let i = 0; i < childFilterArr.length; i++) {
                maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : maxNum;
                let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
                let tdNum = childFilterTextObj[key];
                let curNum = maxNum < tdNum ? maxNum : tdNum;
                let nextKey;

                for (let j = 1; j < curNum && (i + j < childFilterArr.length); j++) {
                    nextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
                    if (key != nextKey && curNum > 1) {
                        canRowspan = true;
                        curNum = j;
                    }
                }
                if (canRowspan) {
                    childFilterArr[i].setAttribute("rowspan", curNum);
                    if ($(childFilterArr[i]).find("p.rowspan").length > 0) {//设置td内的p.rowspan高度适应合并后的高度
                        $(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent");
                        $(childFilterArr[i]).find("p.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
                    }
                    canRowspan = false;
                } else {
                    childFilterArr[i].style.display = "none";
                }
                if (maxNum) {
                    maxNum--;
                }
                if (--childFilterTextObj[key] == 0 || maxNum == 0 || (nextKey != undefined && key != nextKey)) {
                    canRowspan = true;
                }
            }
        };

    </script>
</body>

</html>

 NO.2:不能根据每个头数据来合并

layui table 合并单元格,layui,layui,servlet,javascript,前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- layui -->
    <link rel="stylesheet" href="layui/css/layui_base.css">
    <script type="text/javascript" src="layui/layui.js"></script>

    <script src="js/jquery-2.1.0.min.js"></script>

    <title>Document</title>
</head>

<body>
    <table class="layui-table" lay-filter="videoTable" id="videoTable"></table>

    <script>

        let table, layer;

        let videoData = [
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-S4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 2,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-H4-B3"
            }
        ];

        let colsListFalse = [
            { type: 'checkbox', fixed: 'left' },
            { field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
            { field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
            { field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
            { field: 'type', title: '设备类型', align: 'center' },
            { field: 'number', title: '设备数量', align: 'center' }
        ];

        layui.use('layer', function () {
            layer = layui.layer;
            render();
        });

        // 表格
        function render() {
            layui.use('table', function () {
                table = layui.table;

                table.render({
                    elem: '#videoTable',
                    data: videoData,
                    height: '410',
                    width: '100%',
                    defaultToolbar: [],
                    cellMinWidth: 100,
                    cols: [colsListFalse],
                    page: true, //是否显示分页
                    limits: [10, 100, 1000, 2000],
                    page: {
                        count: videoData.length,
                        prev: '上一页',
                        next: '下一页',
                        layout: ['prev', 'page', 'next', 'count', 'limit']
                    },
                    done: function (res, curr, count) {
                        // mergeRows(res, 'videoTable')
                        mergeRows(res)
                    }
                });
            });
        }

        // 这里是从别人那里拷贝来的代码
        function mergeRows(res, table) {
            var data = res.data;
            console.log(data)
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
            // var columsName = ['deviceId', 'ypRL', 'ypLoading', 's1RL', 's1Loading', 's2RL', 's2Loading'];//需要合并的列名称
            var columsName = ['privilegeList', 'deviceAmount', 'newDeviceAmount'];//需要合并的列名称
            // var columsIndex = [0, 2, 3, 7, 8, 12, 13];//需要合并的列索引值
            var columsIndex = [1, 2, 3];//需要合并的列索引值

            for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                // var trArr = $('div[lay-id="' + table + '"] .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;
            }
        }

    </script>
</body>

</html>

 NO.3:用来合并表格,然后对需要合并的列,加个merge属性,设置为true

不能根据每个头数据来合并

layui table 合并单元格,layui,layui,servlet,javascript,前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- layui -->
    <link rel="stylesheet" href="layui/css/layui_base.css">
    <script type="text/javascript" src="layui/layui.js"></script>

    <script src="js/jquery-2.1.0.min.js"></script>

    <title>Document</title>
</head>

<body>
    <table class="layui-table" lay-filter="videoTable" id="videoTable"></table>

    <script>

        let table, layer;

        let videoData = [
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 2,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS',
                type: "MT95C-S4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 2,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-D4-B3"
            },
            {
                deviceAmount: 4,
                newDeviceAmount: 2,
                number: 1,
                privilegeList: 'ADAS, DSM',
                type: "MT95C-H4-B3"
            }
        ];

        let colsListFalse = [
            { type: 'checkbox', fixed: 'left' },
            { field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
            { field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
            { field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
            { field: 'type', title: '设备类型', align: 'center' },
            { field: 'number', title: '设备数量', align: 'center' }
        ];

        layui.use('layer', function () {
            layer = layui.layer;
            render();
        });

        // 表格
        function render() {
            layui.use('table', function () {
                table = layui.table;

                table.render({
                    elem: '#videoTable',
                    data: videoData,
                    height: '410',
                    width: '100%',
                    defaultToolbar: [],
                    cellMinWidth: 100,
                    cols: [colsListFalse],
                    page: true, //是否显示分页
                    limits: [10, 100, 1000, 2000],
                    page: {
                        count: videoData.length,
                        prev: '上一页',
                        next: '下一页',
                        layout: ['prev', 'page', 'next', 'count', 'limit']
                    },
                    done: function (res, curr, count) {
                        merge(this); //调用合并表格的方法
                    }
                });
            });
        }

        /**
       * 合并单元格 
       */
        function merge(myTable) {
            var tableBox = $(myTable.elem).next().children('.layui-table-box'),
                $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                cols = myTable.cols[0], mergeRecord = {};

            for (let i = 0; i < cols.length; i++) {
                var item3 = cols[i], field = item3.field;
                if (item3.merge) {
                    var mergeField = [field];
                    if (item3.merge !== true) {
                        if (typeof item3.merge == 'string') {
                            mergeField = [item3.merge]
                        } else {
                            mergeField = item3.merge
                        }
                    }
                    mergeRecord[i] = { mergeField: mergeField, rowspan: 1 }
                }
            }

            $main.each(function (i) {

                for (var item in mergeRecord) {
                    if (i == $main.length - 1 || isMaster(i, item)) {
                        $(this).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                        $fixLeft.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                        $fixRight.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                        mergeRecord[item].rowspan = 1;
                    } else {
                        $(this).children('[data-key$="-' + item + '"]').remove();
                        $fixLeft.eq(i).children('[data-key$="-' + item + '"]').remove();
                        $fixRight.eq(i).children('[data-key$="-' + item + '"]').remove();
                        mergeRecord[item].rowspan += 1;
                    }
                }
            })

            function isMaster(index, item) {
                var mergeField = mergeRecord[item].mergeField;
                var dataLength = layui.table.cache[myTable.id].length;
                for (var i = 0; i < mergeField.length; i++) {

                    if (layui.table.cache[myTable.id][dataLength - 2 - index][mergeField[i]]
                        !== layui.table.cache[myTable.id][dataLength - 1 - index][mergeField[i]]) {
                        return true;
                    }
                }
                return false;
            }
        }
    </script>
</body>

</html>

NO4.根据field来自动合并 ,可以根据每个头数据来合并

优点:NO1的缺点迎刃而解

摘自文章:layui表格行合并_destiny ~的博客-CSDN博客_layui导出excel合并单元格

layui table 合并单元格,layui,layui,servlet,javascript,前端文章来源地址https://www.toymoban.com/news/detail-546422.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格合并行工具</title>
    <script type="text/javascript" src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script>
        var teatTable1Data = [
            { "location": "西南", "cityName": "昆明", "province": "云南", "area": "100平方千米", "prople": "300万" },
            { "location": "西南", "cityName": "曲靖", "province": "云南", "area": "100平方千米", "prople": "700万" },
            { "location": "西南", "cityName": "玉溪", "province": "云南", "area": "100平方千米", "prople": "600万" },
            { "location": "西南", "cityName": "成都", "province": "四川", "area": "100平方千米", "prople": "400万" },
            { "location": "西南", "cityName": "宜宾", "province": "四川", "area": "100平方千米", "prople": "400万" },
            { "location": "西北", "cityName": "银川", "province": "宁夏", "area": "100平方千米", "prople": "500万" },
            { "location": "西北", "cityName": "乌鲁木齐", "province": "新疆", "area": "100平方千米", "prople": "600万" },
            { "location": "西北", "cityName": "喀什", "province": "新疆", "area": "100平方千米", "prople": "600万" },
            { "location": "西北", "cityName": "西宁", "province": "青海", "area": "100平方千米", "prople": "500万" },
            { "location": "西北", "cityName": "兰州", "province": "甘肃", "area": "100平方千米", "prople": "400万" },
            { "location": "西北", "cityName": "酒泉", "province": "甘肃", "area": "100平方千米", "prople": "300万" },
        ];
        var teatTable2Data = [
            { "location2": "亚洲", "cityName22": "北京", "province2": "中国", "area2": "100平方千米", "prople2": "300万" },
            { "location2": "亚洲", "cityName2": "孟买", "province2": "印度", "area2": "100平方千米", "prople2": "700万" },
            { "location2": "亚洲", "cityName2": "东京", "province2": "日本", "area2": "100平方千米", "prople2": "600万" },
            { "location2": "欧洲", "cityName2": "巴黎", "province2": "法国", "area2": "100平方千米", "prople2": "400万" },
            { "location2": "欧洲", "cityName2": "伦敦", "province2": "英国", "area2": "100平方千米", "prople2": "400万" },
            { "location2": "欧洲", "cityName2": "伦敦2", "province2": "英国", "area2": "100平方千米", "prople2": "500万" },
            { "location2": "欧洲", "cityName2": "柏林", "province2": "德国", "area2": "100平方千米", "prople2": "600万" },
            { "location2": "美洲", "cityName2": "纽约", "province2": "美国", "area2": "100平方千米", "prople2": "600万" },
            { "location2": "美洲", "cityName2": "纽约2", "province2": "美国", "area2": "100平方千米", "prople2": "500万" },
            { "location2": "美洲", "cityName2": "华盛顿", "province2": "美国", "area2": "100平方千米", "prople2": "400万" },
            { "location2": "美洲", "cityName2": "多伦多", "province2": "加拿大", "area2": "100平方千米", "prople2": "300万" },
        ];
        var teatTable3Data = [
            { "location3": "银河系", "cityName3": "地球", "province3": "太阳系", "area3": "100平方千米", "prople3": "300万" },
            { "location3": "银河系", "cityName3": "月球", "province3": "太阳系", "area3": "100平方千米", "prople3": "700万" },
            { "location3": "银河系", "cityName3": "土星", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
            { "location3": "银河系", "cityName3": "水星", "province3": "太阳系", "area3": "100平方千米", "prople3": "400万" },
            { "location3": "银河系", "cityName3": "金星", "province3": "太阳系", "area3": "100平方千米", "prople3": "400万" },
            { "location3": "银河系", "cityName3": "旅行者1号", "province3": "太阳系", "area3": "100平方千米", "prople3": "500万" },
            { "location3": "银河系", "cityName3": "旅行者2号", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
            { "location3": "银河系", "cityName3": "天王星", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
            { "location3": "三体星系", "cityName3": "三体星1", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "500万" },
            { "location3": "三体星系", "cityName3": "三体星2", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "400万" },
            { "location3": "三体星系", "cityName3": "三体星2", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "300万" },
        ];

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                data: teatTable1Data,
                title: '测试表格1',
                elem: '#test-table1',
                defaultToolbar: false,
                page: false,
                cols: [[
                    { type: 'radio', align: 'center' },
                    { field: 'location', title: '位置区域', align: 'center' },
                    { field: 'province', title: '省份', align: 'center' },
                    { field: 'area', title: '面积', align: 'center' },
                    { field: 'cityName', title: '城市', align: 'center' },
                    { field: 'prople', title: '人口数量', align: 'center' }
                ]],
                done: function () {
                    /**
                     * 参数1  需要合并列的数组,0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
                     * 参数2  当前表格的index (用于在一个页面中有使用了多个表格的情况,如果只有一个表格填0就行
                     * 		  index这个值是表格加载的顺序,从0开始,如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
                     * 参数3  是按照html元素合并,还是按照标签中的text内容合并,建议填true
                     * 参数4  radio/checkbox根据哪一行去合并
                     */
                     layuiRowspan(['0', 'location', 'province', 'prople'], "0", true, "location");
                }
            });

            table.render({
                data: teatTable2Data,
                title: '测试表格2',
                elem: '#test-table2',
                defaultToolbar: false,
                page: false,
                cols: [[
                    { type: 'checkbox', align: 'center' },
                    { field: 'location2', title: '位置区域', align: 'center' },
                    { field: 'province2', title: '省份', align: 'center' },
                    { field: 'area2', title: '面积', align: 'center' },
                    { field: 'cityName2', title: '城市', align: 'center' },
                    { field: 'prople2', title: '人口数量', align: 'center' }
                ]],
                done: function () {
                    /**
                     * 参数1  需要合并列的数组,0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
                     * 参数2  当前表格的index (用于在一个页面中有使用了多个表格的情况,如果只有一个表格填0就行
                     * 		  index这个值是表格加载的顺序,从0开始,如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
                     * 参数3  是按照html元素合并,还是按照标签中的text内容合并,建议填true
                     * 参数4  radio/checkbox根据哪一行去合并
                     */
                     layuiRowspan(['0', 'location2', 'province2', 'prople2'], "1", true, "location2");
                }
            });

            table.render({
                data: teatTable3Data,
                title: '测试表格3',
                elem: '#test-table3',
                defaultToolbar: false,
                page: false,
                cols: [[
                    { type: 'radio', align: 'center' },
                    { field: 'location3', title: '位置区域', align: 'center' },
                    { field: 'province3', title: '省份', align: 'center' },
                    { field: 'area3', title: '面积', align: 'center' },
                    { field: 'cityName3', title: '城市', align: 'center' },
                    { field: 'prople3', title: '人口数量', align: 'center' }
                ]],
                done: function () {
                    /**
                     * 参数1  需要合并列的数组,0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
                     * 参数2  当前表格的index (用于在一个页面中有使用了多个表格的情况,如果只有一个表格填0就行
                     * 		  index这个值是表格加载的顺序,从0开始,如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
                     * 参数3  是按照html元素合并,还是按照标签中的text内容合并,建议填true
                     * 参数4  radio/checkbox根据哪一行去合并
                     */
                     layuiRowspan(['0', 'location3', 'province3', 'prople3'], "2", true, "location3");
                }
            });
        });


        //行合并 start
        function execRadioRows(childFilterArr, ckChildFilterArr, flag) {
            //获取td的个数和种类
            var chChildFilterTextObj = {};
            var chText = [];
            var chIndex = [];

            for (var i = 0; i < ckChildFilterArr.length; i++) {
                var chChildText = flag ? ckChildFilterArr[i].innerHTML : ckChildFilterArr[i].textContent;
                if (chChildFilterTextObj[chChildText] == undefined) {
                    chChildFilterTextObj[chChildText] = 1;
                    chText.push(chChildText);
                } else {
                    var num = chChildFilterTextObj[chChildText];
                    chChildFilterTextObj[chChildText] = num * 1 + 1;
                }
            }
            for (var i = 0; i < chText.length; i++) {
                var chNum = 0;
                for (var j = 0; j < ckChildFilterArr.length; j++) {
                    var chChildText = flag ? ckChildFilterArr[j].innerHTML : ckChildFilterArr[j].textContent;
                    if (chText[i] == chChildText) {
                        chNum = chNum + 1
                    }
                }
                chIndex.push(chNum);
            }
            var newIndex = [];
            for (var i = 0; i < chIndex.length; i++) {
                if (i == 0) {
                    newIndex.push(0);
                } else {
                    var newNum = 0;
                    for (var j = 0; j < chIndex.length; j++) {
                        if (j < i) {
                            newNum = newNum + chIndex[j];
                        }
                    }
                    newIndex.push(newNum);
                }
            }
            chIndex = newIndex;

            for (var j = 0; j < childFilterArr.length; j++) {
                var findFlag = false;
                for (var k = 0; k < chIndex.length; k++) {
                    if (j == chIndex[k]) {
                        findFlag = true;
                        if (chIndex[k + 1] != null) {
                            childFilterArr[j].setAttribute("rowspan", chIndex[k + 1] - j);
                            $(childFilterArr[j]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
                            $(childFilterArr[j]).find("div.layui-table-cell")[0].style.height = (chIndex[k + 1] - j) * 38 - 10 + "px";

                        } else {
                            childFilterArr[j].setAttribute("rowspan", childFilterArr.length - j);
                            $(childFilterArr[j]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
                            $(childFilterArr[j]).find("div.layui-table-cell")[0].style.height = (childFilterArr.length - j) * 38 - 10 + "px";
                        }
                    }
                }
                if (findFlag == false) {
                    childFilterArr[j].style.display = "none";
                }
            }
        }
        function execRowspan(fieldName, index, flag, ckRows) {
            var fixedNode = $(".layui-table-body")[index];
            var child = $(fixedNode).find("td");
            var childFilterArr = [];
            for (var j = 0; j < child.length; j++) {
                child[j].getAttribute('data-field')
                if (child[j].getAttribute("data-field") == fieldName) {
                    childFilterArr.push(child[j]);
                }
            }

            var ckChildFilterArr = [];
            if (fieldName == "0") {
                for (var j = 0; j < child.length; j++) {
                    child[j].getAttribute('data-field')
                    if (child[j].getAttribute("data-field") == ckRows) {
                        ckChildFilterArr.push(child[j]);
                    }
                }
                execRadioRows(childFilterArr, ckChildFilterArr, flag);
                return;
            }

            //获取td的个数和种类
            var childFilterTextObj = {};
            for (var i = 0; i < childFilterArr.length; i++) {
                var childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
                if (childFilterTextObj[childText] == undefined) {
                    childFilterTextObj[childText] = 1;
                } else {
                    var num = childFilterTextObj[childText];
                    childFilterTextObj[childText] = num * 1 + 1;
                }
            }
            var canRowspan = true;
            var maxNum;//以前列单元格为基础获取的最大合并数
            var finalNextIndex;//获取其下第一个不合并单元格的index
            var finalNextKey;//获取其下第一个不合并单元格的值
            for (var i = 0; i < childFilterArr.length; i++) {
                (maxNum > 9000 || !maxNum) && (maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : 9999);
                var key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;//获取下一个单元格的值
                var nextIndex = i + 1;
                var tdNum = childFilterTextObj[key];
                var curNum = maxNum < tdNum ? maxNum : tdNum;
                if (canRowspan) {
                    for (var j = 1; j <= curNum && (i + j < childFilterArr.length);) {//循环获取最终合并数及finalNext的index和key
                        finalNextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
                        finalNextIndex = i + j;
                        if ((key != finalNextKey && curNum > 1) || maxNum == j) {
                            canRowspan = true;
                            curNum = j;
                            break;
                        }
                        j++;
                        if ((i + j) == childFilterArr.length) {
                            finalNextKey = undefined;
                            finalNextIndex = i + j;
                            break;
                        }
                    }
                    childFilterArr[i].setAttribute("rowspan", curNum);
                    if ($(childFilterArr[i]).find("div.rowspan").length > 0) {//设置td内的div.rowspan高度适应合并后的高度
                        $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
                        $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
                    }
                    canRowspan = false;
                } else {
                    childFilterArr[i].style.display = "none";
                }
                if (--childFilterTextObj[key] == 0 | --maxNum == 0 | --curNum == 0 | (finalNextKey != undefined && nextIndex == finalNextIndex)) {
                    canRowspan = true;
                }
            }
        }
        function layuiRowspan(fieldNameTmp, index, flag, ckRows) {
            var fieldName = [];
            if (typeof fieldNameTmp == "string") {
                fieldName.push(fieldNameTmp);
            } else {
                fieldName = fieldName.concat(fieldNameTmp);
            }
            for (var i = 0; i < fieldName.length; i++) {
                execRowspan(fieldName[i], index, flag, ckRows);
            }
        }
    //行合并 end
    </script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-sm4">
                <div class="grid-demo grid-demo-bg1">
                    <table class="layui-table" id="test-table1" lay-filter="test-table1"></table>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="grid-demo">
                    <table class="layui-table" id="test-table2" lay-filter="test-table2"></table>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="grid-demo">
                    <table class="layui-table" id="test-table3" lay-filter="test-table3"></table>
                </div>
            </div>

        </div>
    </div>
</body>

</html>

到了这里,关于layui表格合并的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vxe-table表格合并单元格和编辑

    //这是在vue上面引用vxe-table插件实现的,主要方法都设置在table中,mergeCells,tableData都是在vue页面的data初使化数据, :footer-method=“footerMethod”:尾部数据,:merge-footer-items=“mergeCells”:尾部合并单元格。vxe-table网址:https://vxetable.cn/#/table/advanced/footerSpan

    2023年04月09日
    浏览(46)
  • vue中Element-ui 表格 (Table)合并行、列单元格

    先在el-table里加个属性:span-method绑定方法objectSpanMethod(),这个用来把你想合并的列根据你写的逻辑来合并,再写个getSpanArr(),这个写合并的逻辑。 加一个属性两个方法,然后在获取表格数据的时候调用一下getSpanArr(),示例代码写了四个逻辑,根据id相同合并,根据id和其他字段

    2024年02月10日
    浏览(48)
  • 基于element-ui的table实现树级表格操作及单元格合并

    如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现增删改操作。 网上翻阅了很多实例,没有能解决所有需求的案例,于是自己实现了一套。 时间匆忙,逻辑有优化的地方还请无偿指出! 最终效果如下

    2024年02月14日
    浏览(49)
  • Word控件Spire.Doc 【Table】教程(6): 在 Word 中合并或拆分表格单元格

    Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具,专注于创建、编辑、转换和打印Word/PDF/Excel等格式文件处

    2024年02月15日
    浏览(42)
  • 前端 vue el-table 增加合计行及合并单元格

    自己总结的,不好别喷,谢谢~~~  表格触发调用方法  合计行代码 在 合计行方法中 直接去修改了表格样式  

    2024年02月07日
    浏览(48)
  • vue前端docx库生成word表格 并合并单元格的例子

            Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。在Vue中生成Word表格并合并单元格,通常需要使用额外的库,如`docx`,它是一个用于创建和修改Word文档(`.docx`)的JavaScript库。         以下是一个使用Vue.js和`docx`库来生成Word文档并合并

    2024年02月22日
    浏览(50)
  • Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理

    返回的数据不符合规范,正确的成功状态码应为:“code”: 0异常处理 根据官方文档描述 异步数据参数中,数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为 很多时候,接口返回的数据格式并不一定都符

    2024年02月16日
    浏览(41)
  • 【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

    首先需要了解俩个函数,row-class-name、cell-class-name 这里以cell-class-name单元格样式为例 row-class-name 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String cell-class-name 单元格的 className 的回调方法,也可以使用字符串为所有单元

    2024年01月24日
    浏览(53)
  • layui.table表格重载(表格搜索)

    同样,由于官方文档比较笼统,还是做一些layui的探索。本次内容为layui.table重载。 引入问题: 传统web更新页面用页面跳转的方式,现多用局部元素重载,提高用户体验。Ajax技术就是为了实现此功能而诞生的。layui框架在table模块中提供了类似的功能,为避免二次渲染,同时

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包