效果如图所示，第一列相同的记录进行单元格合并：
image.png
代码如下：
<table class="layui-table" id="table" lay-filter="test"
style="padding-top: 20px;table-layout:fixed;width: 100%">
<thead id="thead">
<tr>
<th lay-data="{field:'testEnv', width:110,align : 'center'}">测试环境</th>
<th lay-data="{field:'user_server', width:277,align : 'center'}">占用服务</th>
<th lay-data="{field:'product', width:110,align : 'center'}">项目编号</th>
<th lay-data="{field:'user', width:110,align : 'center'}">申请人</th>
<th lay-data="{field:'start_date', width:110,align : 'center'}">开始时间</th>
<th lay-data="{field:'end_date', width:110,align : 'center'}">结束时间</th>
<th lay-data="{field:'pro_statud', width:110,align : 'center'}">项目状态</th>
<th lay-data="{field:'operation',width:'125',align : 'center'}">操作</th>
</tr>
</thead>
<tbody id="tbody">
{% for r in records %}
<tr>
<td>
{{ r.env_name }}
{% if r.env_status == 0 %}
<input type="button" class="btn btn-success btn-xs" value="空闲中">
{% elif r.env_status == 1 %}
<input type="button" class="btn btn-danger btn-xs" value="使用中">
{% endif %}
</td>
<td>{{ r.use_server }}</td>
<td>{{ r.env_pro }}</td>
<td>{{ r.env_user }}</td>
<td>{{ r.start_date }}</td>
<td>{{ r.end_date }}</td>
<td>{% if r.env_pro %}
{{ r.get_pro_status_display }}
{% endif %}
</td>
<td>
{% if r.env_pro %}
{% if r.env_user == username %}
{% if r.pro_status == 0 or r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openEditModel('{{ r.env_pro }}')">
<img src="/static/svg/pen.svg">修改
</a>
{% endif %}
{% if r.pro_status != 1 %}
<a href="javascript:void(0)"
onclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">
<img src="/static/svg/delete.svg">删除
</a>
{% endif %}
{% endif %}
{% if usr_role == 'admin' or usr_role == 'dev' %}
{% if r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openReleaseModel('{{ r.env_pro }}')">
<img src="/static/svg/auditing.svg">释放
</a>
{% endif %}
{% endif %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
js
//合并数据表格行
layui.use('table', function () {
var table = layui.table;
table.init('test', {
done: function () {
layuiRowspan('testEnv', 1);
}
});
})
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);
}
}
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;
}
}
}
网友评论