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.最后处理结果如下图