layui合并单元格(此方式适用于没有列冻结的单元格合并)
程序员文章站
2022-07-13 14:27:53
...
layui合并单元格(此方式适用于没有列冻结的单元格合并)
/**
* name layui合并tbody中单元格的方法
* @param fieldName 要合并列的field属性值往后面加可以传多个属性名称
* @param index 表格的索引值 从1开始
*/
function layuiRowspan(fieldName, index, fieldName2) {
// 左侧列为冻结的情况
// var tbodyNode = document.getElementsByClassName("layui-table-fixed-l")[index-1];
// 左侧导航栏不冻结的情况
var tbodyNode = document.getElementsByClassName("layui-table-body")[index - 1];
var child = tbodyNode.getElementsByTagName("td");
var childFilterArr = [];
var childFilterArr2 = [];
// 获取data-field属性为fieldName的td
for (var i = 0; i < child.length; i++) {
if (child[i].getAttribute("data-field") === fieldName) {
childFilterArr.push(child[i]);
}
if (child[i].getAttribute("data-field") === fieldName2) {
childFilterArr2.push(child[i]);
}
}
// 获取td的个数和种类
var childFilterTextObj = {};
for (var i = 0; i < childFilterArr.length; i++) {
var childText = childFilterArr[i].textContent;
if (childFilterTextObj[childText] == undefined) {
childFilterTextObj[childText] = 1;
} else {
var num = childFilterTextObj[childText];
childFilterTextObj[childText] = num * 1 + 1;
}
}
// 给获取到的td设置合并单元格属性
for (var key in childFilterTextObj) {
var tdNum = childFilterTextObj[key];
var canRowspan = true;
for (var i = 0; i < childFilterArr.length; i++) {
if (childFilterArr[i].textContent == key) {
if (canRowspan) {
childFilterArr[i].setAttribute("rowspan", tdNum);
childFilterArr2[i].setAttribute("rowspan", tdNum);
canRowspan = false;
} else {
childFilterArr[i].style.display = "none";
childFilterArr2[i].style.display = "none";
}
}
}
}
}
//在layui表格
//展示已知数据
table.render({
elem: '#AuthBindingTable'
, height: "full-250"
, cols: columns
, data: data
, page: true//是否显示分页
, limit: 40
, toolbar: 'true'
, limits: [40, 50, 60, 70]
, done: function (res, curr, count) {
//就行回调处理合并单元格
layuiRowspan("odCode", 1, "name");
}
});