摘自文章： layui表格合并_忘记昵称了的博客-CSDN博客_layui 表格合并
NO.1：根据field来自动合并 ，可以根据每个头数据来合并
缺点：一个页面中有超过一个表格，只能合并一个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- layui -->
<link rel="stylesheet" href="layui/css/layui_base.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<title>Document</title>
</head>
<body>
<table class="layui-table" lay-filter="videoTable" id="videoTable"></table>
<script>
let table, layer;
let videoData = [
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-D4-B3"
},
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-S4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 2,
privilegeList: 'ADAS, DSM',
type: "MT95C-D4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS, DSM',
type: "MT95C-H4-B3"
}
];
let colsListFalse = [
{ type: 'checkbox', fixed: 'left' },
{ field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
{ field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
{ field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
{ field: 'type', title: '设备类型', align: 'center' },
{ field: 'number', title: '设备数量', align: 'center' }
];
layui.use('layer', function () {
layer = layui.layer;
render();
});
// 表格
function render() {
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#videoTable',
data: videoData,
height: '410',
width: '100%',
defaultToolbar: [],
cellMinWidth: 100,
cols: [colsListFalse],
page: true, //是否显示分页
limits: [10, 100, 1000, 2000],
page: {
count: videoData.length,
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count', 'limit']
},
done: function (res, curr, count) {
layuiRowspan(['privilegeList', 'deviceAmount', 'newDeviceAmount'], 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 = 9999;
for (let i = 0; i < childFilterArr.length; i++) {
maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : maxNum;
let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
let tdNum = childFilterTextObj[key];
let curNum = maxNum < tdNum ? maxNum : tdNum;
let nextKey;
for (let j = 1; j < curNum && (i + j < childFilterArr.length); j++) {
nextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
if (key != nextKey && curNum > 1) {
canRowspan = true;
curNum = j;
}
}
if (canRowspan) {
childFilterArr[i].setAttribute("rowspan", curNum);
if ($(childFilterArr[i]).find("p.rowspan").length > 0) {//设置td内的p.rowspan高度适应合并后的高度
$(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent");
$(childFilterArr[i]).find("p.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
}
canRowspan = false;
} else {
childFilterArr[i].style.display = "none";
}
if (maxNum) {
maxNum--;
}
if (--childFilterTextObj[key] == 0 || maxNum == 0 || (nextKey != undefined && key != nextKey)) {
canRowspan = true;
}
}
};
</script>
</body>
</html>
NO.2：不能根据每个头数据来合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- layui -->
<link rel="stylesheet" href="layui/css/layui_base.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<title>Document</title>
</head>
<body>
<table class="layui-table" lay-filter="videoTable" id="videoTable"></table>
<script>
let table, layer;
let videoData = [
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-D4-B3"
},
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-S4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 2,
privilegeList: 'ADAS, DSM',
type: "MT95C-D4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS, DSM',
type: "MT95C-H4-B3"
}
];
let colsListFalse = [
{ type: 'checkbox', fixed: 'left' },
{ field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
{ field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
{ field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
{ field: 'type', title: '设备类型', align: 'center' },
{ field: 'number', title: '设备数量', align: 'center' }
];
layui.use('layer', function () {
layer = layui.layer;
render();
});
// 表格
function render() {
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#videoTable',
data: videoData,
height: '410',
width: '100%',
defaultToolbar: [],
cellMinWidth: 100,
cols: [colsListFalse],
page: true, //是否显示分页
limits: [10, 100, 1000, 2000],
page: {
count: videoData.length,
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count', 'limit']
},
done: function (res, curr, count) {
// mergeRows(res, 'videoTable')
mergeRows(res)
}
});
});
}
// 这里是从别人那里拷贝来的代码
function mergeRows(res, table) {
var data = res.data;
console.log(data)
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
// var columsName = ['deviceId', 'ypRL', 'ypLoading', 's1RL', 's1Loading', 's2RL', 's2Loading'];//需要合并的列名称
var columsName = ['privilegeList', 'deviceAmount', 'newDeviceAmount'];//需要合并的列名称
// var columsIndex = [0, 2, 3, 7, 8, 12, 13];//需要合并的列索引值
var columsIndex = [1, 2, 3];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
// var trArr = $('div[lay-id="' + table + '"] .layui-table-body>.layui-table').find("tr");//所有行，如果页面多个表格，这里一定要定位到你所要合并的表格
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
</script>
</body>
</html>
NO.3：用来合并表格，然后对需要合并的列，加个merge属性，设置为true
不能根据每个头数据来合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- layui -->
<link rel="stylesheet" href="layui/css/layui_base.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<title>Document</title>
</head>
<body>
<table class="layui-table" lay-filter="videoTable" id="videoTable"></table>
<script>
let table, layer;
let videoData = [
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-D4-B3"
},
{
deviceAmount: 2,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS',
type: "MT95C-S4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 2,
privilegeList: 'ADAS, DSM',
type: "MT95C-D4-B3"
},
{
deviceAmount: 4,
newDeviceAmount: 2,
number: 1,
privilegeList: 'ADAS, DSM',
type: "MT95C-H4-B3"
}
];
let colsListFalse = [
{ type: 'checkbox', fixed: 'left' },
{ field: 'privilegeList', title: '权限列表', align: 'center', merge: true },
{ field: 'deviceAmount', title: '授权设备总数', align: 'center', merge: true },
{ field: 'newDeviceAmount', title: '新增授权设备总数', align: 'center', merge: true },
{ field: 'type', title: '设备类型', align: 'center' },
{ field: 'number', title: '设备数量', align: 'center' }
];
layui.use('layer', function () {
layer = layui.layer;
render();
});
// 表格
function render() {
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#videoTable',
data: videoData,
height: '410',
width: '100%',
defaultToolbar: [],
cellMinWidth: 100,
cols: [colsListFalse],
page: true, //是否显示分页
limits: [10, 100, 1000, 2000],
page: {
count: videoData.length,
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count', 'limit']
},
done: function (res, curr, count) {
merge(this); //调用合并表格的方法
}
});
});
}
/**
* 合并单元格
*/
function merge(myTable) {
var tableBox = $(myTable.elem).next().children('.layui-table-box'),
$main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
$fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
$fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
cols = myTable.cols[0], mergeRecord = {};
for (let i = 0; i < cols.length; i++) {
var item3 = cols[i], field = item3.field;
if (item3.merge) {
var mergeField = [field];
if (item3.merge !== true) {
if (typeof item3.merge == 'string') {
mergeField = [item3.merge]
} else {
mergeField = item3.merge
}
}
mergeRecord[i] = { mergeField: mergeField, rowspan: 1 }
}
}
$main.each(function (i) {
for (var item in mergeRecord) {
if (i == $main.length - 1 || isMaster(i, item)) {
$(this).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
$fixLeft.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
$fixRight.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
mergeRecord[item].rowspan = 1;
} else {
$(this).children('[data-key$="-' + item + '"]').remove();
$fixLeft.eq(i).children('[data-key$="-' + item + '"]').remove();
$fixRight.eq(i).children('[data-key$="-' + item + '"]').remove();
mergeRecord[item].rowspan += 1;
}
}
})
function isMaster(index, item) {
var mergeField = mergeRecord[item].mergeField;
var dataLength = layui.table.cache[myTable.id].length;
for (var i = 0; i < mergeField.length; i++) {
if (layui.table.cache[myTable.id][dataLength - 2 - index][mergeField[i]]
!== layui.table.cache[myTable.id][dataLength - 1 - index][mergeField[i]]) {
return true;
}
}
return false;
}
}
</script>
</body>
</html>
NO4.根据field来自动合并 ，可以根据每个头数据来合并
优点：NO1的缺点迎刃而解
摘自文章：layui表格行合并_destiny ~的博客-CSDN博客_layui导出excel合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格合并行工具</title>
<script type="text/javascript" src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script>
var teatTable1Data = [
{ "location": "西南", "cityName": "昆明", "province": "云南", "area": "100平方千米", "prople": "300万" },
{ "location": "西南", "cityName": "曲靖", "province": "云南", "area": "100平方千米", "prople": "700万" },
{ "location": "西南", "cityName": "玉溪", "province": "云南", "area": "100平方千米", "prople": "600万" },
{ "location": "西南", "cityName": "成都", "province": "四川", "area": "100平方千米", "prople": "400万" },
{ "location": "西南", "cityName": "宜宾", "province": "四川", "area": "100平方千米", "prople": "400万" },
{ "location": "西北", "cityName": "银川", "province": "宁夏", "area": "100平方千米", "prople": "500万" },
{ "location": "西北", "cityName": "乌鲁木齐", "province": "新疆", "area": "100平方千米", "prople": "600万" },
{ "location": "西北", "cityName": "喀什", "province": "新疆", "area": "100平方千米", "prople": "600万" },
{ "location": "西北", "cityName": "西宁", "province": "青海", "area": "100平方千米", "prople": "500万" },
{ "location": "西北", "cityName": "兰州", "province": "甘肃", "area": "100平方千米", "prople": "400万" },
{ "location": "西北", "cityName": "酒泉", "province": "甘肃", "area": "100平方千米", "prople": "300万" },
];
var teatTable2Data = [
{ "location2": "亚洲", "cityName22": "北京", "province2": "中国", "area2": "100平方千米", "prople2": "300万" },
{ "location2": "亚洲", "cityName2": "孟买", "province2": "印度", "area2": "100平方千米", "prople2": "700万" },
{ "location2": "亚洲", "cityName2": "东京", "province2": "日本", "area2": "100平方千米", "prople2": "600万" },
{ "location2": "欧洲", "cityName2": "巴黎", "province2": "法国", "area2": "100平方千米", "prople2": "400万" },
{ "location2": "欧洲", "cityName2": "伦敦", "province2": "英国", "area2": "100平方千米", "prople2": "400万" },
{ "location2": "欧洲", "cityName2": "伦敦2", "province2": "英国", "area2": "100平方千米", "prople2": "500万" },
{ "location2": "欧洲", "cityName2": "柏林", "province2": "德国", "area2": "100平方千米", "prople2": "600万" },
{ "location2": "美洲", "cityName2": "纽约", "province2": "美国", "area2": "100平方千米", "prople2": "600万" },
{ "location2": "美洲", "cityName2": "纽约2", "province2": "美国", "area2": "100平方千米", "prople2": "500万" },
{ "location2": "美洲", "cityName2": "华盛顿", "province2": "美国", "area2": "100平方千米", "prople2": "400万" },
{ "location2": "美洲", "cityName2": "多伦多", "province2": "加拿大", "area2": "100平方千米", "prople2": "300万" },
];
var teatTable3Data = [
{ "location3": "银河系", "cityName3": "地球", "province3": "太阳系", "area3": "100平方千米", "prople3": "300万" },
{ "location3": "银河系", "cityName3": "月球", "province3": "太阳系", "area3": "100平方千米", "prople3": "700万" },
{ "location3": "银河系", "cityName3": "土星", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
{ "location3": "银河系", "cityName3": "水星", "province3": "太阳系", "area3": "100平方千米", "prople3": "400万" },
{ "location3": "银河系", "cityName3": "金星", "province3": "太阳系", "area3": "100平方千米", "prople3": "400万" },
{ "location3": "银河系", "cityName3": "旅行者1号", "province3": "太阳系", "area3": "100平方千米", "prople3": "500万" },
{ "location3": "银河系", "cityName3": "旅行者2号", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
{ "location3": "银河系", "cityName3": "天王星", "province3": "太阳系", "area3": "100平方千米", "prople3": "600万" },
{ "location3": "三体星系", "cityName3": "三体星1", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "500万" },
{ "location3": "三体星系", "cityName3": "三体星2", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "400万" },
{ "location3": "三体星系", "cityName3": "三体星2", "province3": "半人马座三星", "area3": "100平方千米", "prople3": "300万" },
];
layui.use('table', function () {
var table = layui.table;
table.render({
data: teatTable1Data,
title: '测试表格1',
elem: '#test-table1',
defaultToolbar: false,
page: false,
cols: [[
{ type: 'radio', align: 'center' },
{ field: 'location', title: '位置区域', align: 'center' },
{ field: 'province', title: '省份', align: 'center' },
{ field: 'area', title: '面积', align: 'center' },
{ field: 'cityName', title: '城市', align: 'center' },
{ field: 'prople', title: '人口数量', align: 'center' }
]],
done: function () {
/**
* 参数1 需要合并列的数组，0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
* 参数2 当前表格的index (用于在一个页面中有使用了多个表格的情况，如果只有一个表格填0就行
* index这个值是表格加载的顺序，从0开始，如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
* 参数3 是按照html元素合并，还是按照标签中的text内容合并，建议填true
* 参数4 radio/checkbox根据哪一行去合并
*/
layuiRowspan(['0', 'location', 'province', 'prople'], "0", true, "location");
}
});
table.render({
data: teatTable2Data,
title: '测试表格2',
elem: '#test-table2',
defaultToolbar: false,
page: false,
cols: [[
{ type: 'checkbox', align: 'center' },
{ field: 'location2', title: '位置区域', align: 'center' },
{ field: 'province2', title: '省份', align: 'center' },
{ field: 'area2', title: '面积', align: 'center' },
{ field: 'cityName2', title: '城市', align: 'center' },
{ field: 'prople2', title: '人口数量', align: 'center' }
]],
done: function () {
/**
* 参数1 需要合并列的数组，0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
* 参数2 当前表格的index (用于在一个页面中有使用了多个表格的情况，如果只有一个表格填0就行
* index这个值是表格加载的顺序，从0开始，如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
* 参数3 是按照html元素合并，还是按照标签中的text内容合并，建议填true
* 参数4 radio/checkbox根据哪一行去合并
*/
layuiRowspan(['0', 'location2', 'province2', 'prople2'], "1", true, "location2");
}
});
table.render({
data: teatTable3Data,
title: '测试表格3',
elem: '#test-table3',
defaultToolbar: false,
page: false,
cols: [[
{ type: 'radio', align: 'center' },
{ field: 'location3', title: '位置区域', align: 'center' },
{ field: 'province3', title: '省份', align: 'center' },
{ field: 'area3', title: '面积', align: 'center' },
{ field: 'cityName3', title: '城市', align: 'center' },
{ field: 'prople3', title: '人口数量', align: 'center' }
]],
done: function () {
/**
* 参数1 需要合并列的数组，0代表的是合并单选按钮或者是复选框 radio/checkbox 后端需要将这些字段进行排序
* 参数2 当前表格的index (用于在一个页面中有使用了多个表格的情况，如果只有一个表格填0就行
* index这个值是表格加载的顺序，从0开始，如果页面上表格很多建议debug用 $(".layui-table-body")[index]看一下就拿到了)
* 参数3 是按照html元素合并，还是按照标签中的text内容合并，建议填true
* 参数4 radio/checkbox根据哪一行去合并
*/
layuiRowspan(['0', 'location3', 'province3', 'prople3'], "2", true, "location3");
}
});
});
//行合并 start
function execRadioRows(childFilterArr, ckChildFilterArr, flag) {
//获取td的个数和种类
var chChildFilterTextObj = {};
var chText = [];
var chIndex = [];
for (var i = 0; i < ckChildFilterArr.length; i++) {
var chChildText = flag ? ckChildFilterArr[i].innerHTML : ckChildFilterArr[i].textContent;
if (chChildFilterTextObj[chChildText] == undefined) {
chChildFilterTextObj[chChildText] = 1;
chText.push(chChildText);
} else {
var num = chChildFilterTextObj[chChildText];
chChildFilterTextObj[chChildText] = num * 1 + 1;
}
}
for (var i = 0; i < chText.length; i++) {
var chNum = 0;
for (var j = 0; j < ckChildFilterArr.length; j++) {
var chChildText = flag ? ckChildFilterArr[j].innerHTML : ckChildFilterArr[j].textContent;
if (chText[i] == chChildText) {
chNum = chNum + 1
}
}
chIndex.push(chNum);
}
var newIndex = [];
for (var i = 0; i < chIndex.length; i++) {
if (i == 0) {
newIndex.push(0);
} else {
var newNum = 0;
for (var j = 0; j < chIndex.length; j++) {
if (j < i) {
newNum = newNum + chIndex[j];
}
}
newIndex.push(newNum);
}
}
chIndex = newIndex;
for (var j = 0; j < childFilterArr.length; j++) {
var findFlag = false;
for (var k = 0; k < chIndex.length; k++) {
if (j == chIndex[k]) {
findFlag = true;
if (chIndex[k + 1] != null) {
childFilterArr[j].setAttribute("rowspan", chIndex[k + 1] - j);
$(childFilterArr[j]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
$(childFilterArr[j]).find("div.layui-table-cell")[0].style.height = (chIndex[k + 1] - j) * 38 - 10 + "px";
} else {
childFilterArr[j].setAttribute("rowspan", childFilterArr.length - j);
$(childFilterArr[j]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
$(childFilterArr[j]).find("div.layui-table-cell")[0].style.height = (childFilterArr.length - j) * 38 - 10 + "px";
}
}
}
if (findFlag == false) {
childFilterArr[j].style.display = "none";
}
}
}
function execRowspan(fieldName, index, flag, ckRows) {
var fixedNode = $(".layui-table-body")[index];
var child = $(fixedNode).find("td");
var childFilterArr = [];
for (var j = 0; j < child.length; j++) {
child[j].getAttribute('data-field')
if (child[j].getAttribute("data-field") == fieldName) {
childFilterArr.push(child[j]);
}
}
var ckChildFilterArr = [];
if (fieldName == "0") {
for (var j = 0; j < child.length; j++) {
child[j].getAttribute('data-field')
if (child[j].getAttribute("data-field") == ckRows) {
ckChildFilterArr.push(child[j]);
}
}
execRadioRows(childFilterArr, ckChildFilterArr, flag);
return;
}
//获取td的个数和种类
var childFilterTextObj = {};
for (var i = 0; i < childFilterArr.length; i++) {
var childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
if (childFilterTextObj[childText] == undefined) {
childFilterTextObj[childText] = 1;
} else {
var num = childFilterTextObj[childText];
childFilterTextObj[childText] = num * 1 + 1;
}
}
var canRowspan = true;
var maxNum;//以前列单元格为基础获取的最大合并数
var finalNextIndex;//获取其下第一个不合并单元格的index
var finalNextKey;//获取其下第一个不合并单元格的值
for (var i = 0; i < childFilterArr.length; i++) {
(maxNum > 9000 || !maxNum) && (maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : 9999);
var key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;//获取下一个单元格的值
var nextIndex = i + 1;
var tdNum = childFilterTextObj[key];
var curNum = maxNum < tdNum ? maxNum : tdNum;
if (canRowspan) {
for (var 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)) {
canRowspan = true;
}
}
}
function layuiRowspan(fieldNameTmp, index, flag, ckRows) {
var fieldName = [];
if (typeof fieldNameTmp == "string") {
fieldName.push(fieldNameTmp);
} else {
fieldName = fieldName.concat(fieldNameTmp);
}
for (var i = 0; i < fieldName.length; i++) {
execRowspan(fieldName[i], index, flag, ckRows);
}
}
//行合并 end
</script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space10">
<div class="layui-col-sm4">
<div class="grid-demo grid-demo-bg1">
<table class="layui-table" id="test-table1" lay-filter="test-table1"></table>
</div>
</div>
<div class="layui-col-sm4">
<div class="grid-demo">
<table class="layui-table" id="test-table2" lay-filter="test-table2"></table>
</div>
</div>
<div class="layui-col-sm4">
<div class="grid-demo">
<table class="layui-table" id="test-table3" lay-filter="test-table3"></table>
</div>
</div>
</div>
</div>
</body>
</html>
本文转载自: https://blog.csdn.net/Benxiaohai_311/article/details/126589396
版权归原作者 琪公子呀 所有， 如有侵权，请联系我们删除。
版权归原作者 琪公子呀 所有， 如有侵权，请联系我们删除。