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', '180'}">区域机构</th> <th lay-data="{field:'Department', '180'}">机构</th> <th lay-data="{field:'Status', '100'}">状态</th> <th lay-data="{field:'CreatorID', '100'}">填报人</th> <th lay-data="{field:'CreatorNum','150'}">填报电话</th> <th lay-data="{field:'SubmitTime_AreaCenter', '150'}">上报区域公司时间</th> <th lay-data="{field:'SubmitTime_Headquarters', '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.最后处理结果如下图