LayUI靜態表格合並單元格的處理辦法

 1.首先是html頁面代碼 

<div class="am-panel am-panel-default  am-padding-sm">
    <table class="layui-table" id="tabList" lay-filter="DataListTable">
        <thead>
            <tr>
                <th lay-data="{field:'Area', width:'180'}">區域機構</th>
                <th lay-data="{field:'Department', width:'180'}">機構</th>
                <th lay-data="{field:'Status', width:'100'}">狀態</th>
                <th lay-data="{field:'CreatorID', width:'100'}">填報人</th>
                <th lay-data="{field:'CreatorNum',width:'150'}">填報電話</th>
                <th lay-data="{field:'SubmitTime_AreaCenter', width:'150'}">上報區域公司時間</th>
                <th lay-data="{field:'SubmitTime_Headquarters', width:'150'}">上報總部時間</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in ReportList)
            {
                <tr>
                    <td>@item.Area</td>
                    <td>@item.Department</td>
                    <td>@item.Status</td>
                    <td>@item.CreatorID</td>
                    <td>@item.CreatorNum</td>
                    <td>@item.SubmitTime_AreaCenter</td>
                    <td>@item.SubmitTime_Headquarters</td>
                </tr>
            }
        </tbody>
    </table>
</div>

 

 2.然后是jq代碼

　　

script>
        layui.use('table', function () {
            var table = layui.table;
            table.init('DataListTable', {
                height: document.documentElement.clientHeight - 250,
                done: function (res, curr, count) {
                    layuiRowspan('Area', 1);
                    //layuiRowspan(['Area', 'Department'], 1);//支持數組
                    //layuiRowspan("Area", 1, true);
                }

            });
        })

        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;//以前列單元格為基礎獲取的最大合並數
            let finalNextIndex;//獲取其下第一個不合並單元格的index
            let finalNextKey;//獲取其下第一個不合並單元格的值
            for (let i = 0; i < childFilterArr.length; i++) {
                (maxNum > 9000 || !maxNum) && (maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : 9999);
                let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;//獲取下一個單元格的值
                let nextIndex = i + 1;
                let tdNum = childFilterTextObj[key];
                let curNum = maxNum < tdNum ? maxNum : tdNum;
                if (canRowspan) {
                    for (let 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)) {//||(finalNextKey!=undefined&&key!=finalNextKey)
                    canRowspan = true;
                }
            }
        }
        //合並數據表格行
        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);
            }
        }

    </script>

　　

 3.注意項：<tbody>中的<tr>和<td>不能再包含rowspan元素，否則的話會和上面的jq代碼沖突，必須要一行對應一行，一列對應一列

 4.最后處理結果如下圖