一、需求
数据中姓名，学工号内容相同的单元格合并；
二、功能实现
技术栈：layui；
//引入
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<table class="layui-hide" id="staTable" lay-filter="test"></table>
查看layui的官方文档,数据渲染后的回调是放到done中；我们就在done回调函数中处理单元格的合并； 实现思路：循环table中每行的数据，判断相邻两行数据是否相等，数据相等就记录合并数量，直到数据不相等为止，知道合并行数后合并单元格；数据不相等，合并数量清0；
方法一
从需求图中我们看出前三列都是同一个用户的信息，其实只要知道学工号合并的行数就可以了，另外两列可以根据学工号合并的行数来合并；
优点：只需要计算一列的合并的行数即可，计算数量少
缺点：不适合每列合并不同行的需求
layui.use(function(){
var table = layui.table;
var tableData = [{
name: "张三",
depth: "2021德育评价演示（新版）/2023级/100班",
jobNum: "123",
checkType: "体能",
target: "跑步",
}, {
name: "张三",
depth: "2021德育评价演示（新版）/2023级/100班",
jobNum: "123",
checkType: "卫生",
target: "教室卫生",
}, {
name: "李四",
depth: "2022德育评价演示（新版）/2023级/100班",
jobNum: "456",
checkType: "体能",
target: "跑步",
}, {
name: "李四",
depth: "2022德育评价演示（新版）/2023级/100班",
jobNum: "456",
checkType: "卫生",
target: "教室卫生",
}];
table.render({
elem: '#staTable',
// url: '/static/json/2/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
data: tableData,
page: true,
even: true,
cols: [[
{ field: 'name', align: "center", width: 140, title: '姓名', },
{ field: 'depth', align: "center", minWidth: 300, title: '部门' },
{ field: 'jobNum', align: "center", title: '学工号' },
{ field: 'checkType', align: "center", title: '考核分类' },
{ field: 'target', align: "center", title: '二级指标' },
{ title: '操作', align: "center", width: 134, toolbar: '#scoreBtn' }
]],
done: function (res, curr, count) {
var start_tr_index = 1;
var tr_s = $(".layui-table-box table").find("tr");
var index = 2;
var merge_tds = [];
var merge_num = 0;
for (var i = start_tr_index; i < tr_s.length; i++) {
var cur_td = tr_s.eq(i).find("td").eq(index);
var next_td = tr_s.eq(i + 1).find("td").eq(index);
var cur_text = $(cur_td).text();
var next_text = $(next_td).text();
if (cur_text == next_text) {
merge_tds.push(cur_td);
merge_num++;
} else {
if (merge_num != 0) {
$(merge_tds[0]).prevAll().attr("rowspan", merge_num + 1);
$(merge_tds[0]).attr("rowspan", merge_num + 1);
for (var d = 1; d < merge_tds.length; d++) {
$(merge_tds[d]).prevAll().addClass("layui-hide");
$(merge_tds[d]).addClass("layui-hide");
}
$(cur_td).addClass('layui-hide');
$(cur_td).prevAll().addClass("layui-hide");
}
merge_num = 0;
merge_tds = [];
}
}
}
})
})
方法二
适用于当前列只要每行数据相同就合并；
layui.use(function(){
var table = layui.table;
table.render({
elem: '#staTable',
// url: '/static/json/2/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
data: tableData,
page: true,
even: true,
cols: [[
{ field: 'name', align: "center", width: 140, title: '姓名', },
{ field: 'depth', align: "center", minWidth: 300, title: '部门' },
{ field: 'jobNum', align: "center", title: '学工号' },
{ field: 'checkType', align: "center", title: '考核分类' },
{ field: 'target', align: "center", title: '二级指标' },
{ title: '操作', align: "center", width: 134, toolbar: '#scoreBtn' }
]],
done: function (res, curr, count) {
/* 需要合并栏目的数组信息 */
var tableCloumn = [
{
field: "name",
index: 0 /* 需要合并栏目的索引 */
},
{
field: "depth",
index: 1
}, {
field: "jobNum",
index: 2
}
];
var start_tr_index = 1;
var tr_s = $(".layui-table-box table").find("tr");
for (var item of tableCloumn) {
var field = item.field;
var index = item.index;
var merge_num = 0;
var merge_tds = [];
for (var i = start_tr_index; i < tr_s.length; i++) {
var cur_td = tr_s.eq(i).find("td").eq(index);
var next_td = tr_s.eq(i + 1).find("td").eq(index);
var cur_text = $(cur_td).text();
var next_text = $(next_td).text();
if (cur_text == next_text) {
merge_tds.push(cur_td);
merge_num++;
} else {
if (merge_num != 0) {
$(merge_tds[0]).attr("rowspan", merge_num + 1);
for (var d = 1; d < merge_tds.length; d++) {
$(merge_tds[d]).addClass("layui-hide");
}
$(cur_td).addClass("layui-hide");
}
merge_num = 0;
merge_tds = [];
}
}
}
}
})
})
