layui表格单元格合并

代码内有注释

看效果:
在这里插入图片描述

## 以下是代码

    //表格查询
    function loadTable() {
        let queryDepartmentId = $("#departmentId").val();
        layui.table.render({
            id: 'budgetTable'
            , elem: '#budgetTable'
            , url: '/'
            , where: {token: token, companyId: companyId, departmentId: queryDepartmentId, year: year}
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , totalRow: false //开启合计行
            , height: ($(window).height() - 250)
            , parseData: function (res) {
                if (res.staCode == 200) {
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.t.length, //解析数据长度
                        "data": res.t //解析数据列表
                    };
                }
            }
            , cols: [[
                 {field: 'IssuingDepartment', title: '下发部门', merge: true }
                ,{field: 'DEPARTMENT_NAME', title: '被下发部门'}
                , {field: 'NM', title: '科目名称'}
                , {field: 'MONEY', title: '金额',templet: function (res) {
                        return addIdentifier(res.MONEY);
                    }}
                , {field: 'DESCRIPTION', title: '摘要'}
                , {field: 'CREATE_DT',title: '操作时间'}
            ]]
            , done: function (res) {
                mergeRows(res)
            }
        })
    }

    function mergeRows(res, table) {
        var data = res.data;
        console.log(data)
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
        var columsName = ['IssuingDepartment'];//需要合并的列名称
        var columsIndex = [0];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".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;
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值