layui方法渲染复杂表头，合并数据项的单元格

我不是女神ヾ 2022-11-16 10:57 264阅读 0赞

# 1. 数据类型 #

[
        {
            amountList: [
                {year: "2018", reportedAmount: "269.62", approvedAmount: "270.0"},
                {year: "2019", reportedAmount: "255.16", approvedAmount: "256.0"},
                {year: "2020", reportedAmount: "307.65", approvedAmount: "308.0"}
            ],
            category: "xxx"
            certifyCode: "C01"
            Code: "1.0"
            Name: "地区生产总值"
            unit: "亿元"
        },
        ......
    ]

# 2. 表头 #

cols: [
         [
             { field: "category", title: "类别", align: "center", rowspan: 2 },
             { field: "code", title: "代码", align: "center", rowspan: 2 },
             { field: "name", title: "名称", align: "center", rowspan: 2 },
             { field: "data", title: "数据", align: "center", colspan: 2 },
             { field: "code", title: "编码", align: "center", rowspan: 2 },
         ],
         [
             { field: "xxx", align: "center", title: "数据1" },
             { field: "yyy", align: "center", title: "数据2"}
         ],
    ]

# 3. 合并单元格 #

// 回调done
    done(res, curr, count) {
         active.mergeCell("category");
         active.mergeCell("Code");
         active.mergeCell("Name");
    }

mergeCell(type){
        let mergeTxt = "";
        let mergeRows = 0;
        let tds = [];
        $(".layui-table-body tr>td[data-field="+type+"]").each((_, item) => {
            let cell = $(item.querySelector(".layui-table-cell"))[0];
            tds.push(cell);
        });
        let mergeTd = null;
        let delIdx = [];
        tds.forEach((item, idx) => {
            if (idx === tds.length - 1) {
                $(mergeTd).parent().attr("rowspan", mergeRows + 2);
                if($(item).text() === mergeTxt) delIdx.push(idx);
                return void 0;
            }
            if (mergeTxt != $(item).text()) {
                mergeTxt = $(item).text();
                $(mergeTd).parent().attr("rowspan", mergeRows + 1);
                mergeTd = item;
                mergeRows = 0;
            } else {
                mergeRows++;
                delIdx.push(idx);
            }
        });
        delIdx.reverse().forEach((item) => {
            $(tds[item]).parent().remove();
        });
    }

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221022/59bed168e0744b44b0bba1b699b8d002.png