最近遇到一个需求，需要将layui框架渲染出的table表格的表头指定列进行合并，网上查了不少资料都是有两行表头甚至更多行表头的一些列合并，和我的需求不符，我的需求是只有一行表头行，然后需要将该表头的指定两列合并。
1.未改造前代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>layui表头合并demo</title>
<link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet" />
<style>
.laytable-cell-my{ width: 141px; text-align：center; }
</style>
</head>
<body class="layui-padding-3">
<table class="layui-hide" id="ID-table-demo-templet"></table>
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>
layui.use(['table'], function () {
var table = layui.table;
var form = layui.form;
table.render({
elem: '#ID-table-demo-templet',
url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json',
page: true,
height: '315px',
cols: [
[
{ field: 'id', fixed: 'left', width: 80, title: 'ID' },
{
field: 'username',
width: 80,
title: '用户',
templet: '#ID-table-demo-templet-user',
},
{
field: 'sex',
width: 60,
title: '性别',
templet: function (d) {
if (d.sex === '男') {
return '<span style="color: blue">♂</span>';
} else {
return '<span style="color: pink">♀</span>';
}
},
},
{
field: 'city',
width: 115,
title: '城市',
templet:
'<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>',
},
],
],
});
});
</script>
</body>
</html>
2.效果如下，用户和性别表头两列未合并
3.改造的方法是利用获取表头行的单元格，对单元格进行样式修改，在table.render中通过done回调函数操作
done: function (res, cur, count) {
var parentElement = document.querySelector(
'[lay-table-id="ID-table-demo-templet"]'
);
var childElementBoxs =
parentElement.querySelector('.layui-table-box');
var childElementHeaders = childElementBoxs.querySelector(
'.layui-table-header'
);
var childElementHeaderThs = childElementBoxs.querySelectorAll('th');
// 指定列合并
childElementHeaderThs[1].colSpan = 2;
childElementHeaderThs[1].textContent = '';
var div = document.createElement('div');
div.className = 'layui-table-cell laytable-cell-my';
var span = document.createElement('span');
span.textContent = '用户性别';
div.appendChild(span);
childElementHeaderThs[1].appendChild(div);
childElementHeaderThs[2].style.display = 'none';
console.log('res', childElementHeaderThs);
},4.完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>layui表头合并demo</title>
<link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet" />
<style>
.laytable-cell-my{ width: 141px; text-align：center; }
</style>
</head>
<body class="layui-padding-3">
<table class="layui-hide" id="ID-table-demo-templet"></table>
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>
layui.use(['table'], function () {
var table = layui.table;
var form = layui.form;
table.render({
elem: '#ID-table-demo-templet',
url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json',
page: true,
height: '315px',
cols: [
[
{ field: 'id', fixed: 'left', width: 80, title: 'ID' },
{
field: 'username',
width: 80,
title: '用户',
templet: '#ID-table-demo-templet-user',
},
{
field: 'sex',
width: 60,
title: '性别',
templet: function (d) {
if (d.sex === '男') {
return '<span style="color: blue">♂</span>';
} else {
return '<span style="color: pink">♀</span>';
}
},
},
{
field: 'city',
width: 115,
title: '城市',
templet:
'<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>',
},
],
],
done: function (res, cur, count) {
var parentElement = document.querySelector(
'[lay-table-id="ID-table-demo-templet"]'
);
var childElementBoxs =
parentElement.querySelector('.layui-table-box');
var childElementHeaders = childElementBoxs.querySelector(
'.layui-table-header'
);
var childElementHeaderThs = childElementBoxs.querySelectorAll('th');
// 指定列合并
childElementHeaderThs[1].colSpan = 2;
childElementHeaderThs[1].textContent = '';
var div = document.createElement('div');
div.className = 'layui-table-cell laytable-cell-my';
var span = document.createElement('span');
span.textContent = '用户性别';
div.appendChild(span);
childElementHeaderThs[1].appendChild(div);
childElementHeaderThs[2].style.display = 'none';
console.log('res', childElementHeaderThs);
},
});
});
</script>
</body>
</html>
5.改造效果如下
6.更多layui使用方法参考官方文档说明
