layui table 表头合并_layui的table表格行内合并js探讨

直接说需求吧，layuitable已经满足很多复杂表格，但是有些用户设计表格比较个性，涉及到表格数据(非表头)的合并。这里我给出一个js供大家研究探讨。

tableCombine.js文件需要在页面中额外引入

/* 2019-05-06

*table tbody合并单元格

*/

function merges(data, indexs, fields,tableid) {

for (var i = 0; i < indexs.length; i++) {

merge(data, indexs[i], fields[i],tableid);

}

var $trs = $("div[lay-id='"+tableid+"']>.layui-table-box>.layui-table-fixed-l>.layui-table-body>.layui-table tr");

$trs.find('[del="true"]').remove();

console.log($trs);

}

function merge(data, index, field,tableid) {

var $trs = $("div[lay-id='"+tableid+"']>.layui-table-box>.layui-table-fixed-l>.layui-table-body>.layui-table tr");

console.log($trs);

var lastValue = data[0][field], spanNum = 1;

for (var i = 1; i < data.length; i++) {

if (data[i][field] == lastValue) {

spanNum++;

if (i == data.length - 1) {

$trs.eq(i - spanNum + 1).find('td').eq(index).attr('rowspan', spanNum);

for (var j = 1; j < spanNum; j++) {

$trs.eq(i - j + 1).find('td').eq(index).attr('del', 'true');

}

}

} else {

$trs.eq(i - spanNum).find('td').eq(index).attr('rowspan', spanNum);

for (var j = 1; j < spanNum; j++) {

$trs.eq(i - j).find('td').eq(index).attr('del', 'true');

}

spanNum = 1;

lastValue = data[i][field];

}

}

}

页面里：

table.render({

elem: '#demo_table'

, height: 'full-170'

, url: '../data/demo.json'

, page: true //开启分页

, cols: [[ //表头

{ field: 'id', fixed: 'left', width: 50, align: 'center', title: '序号' }

, { field: 'ziduan', fixed: 'left', width: 200, align: 'center', title: '字段' }

, { field: 'ziduan', align: 'center', title: '字段' }

, { field: 'ziduan', align: 'center', title: '字段' }

]],

done: function (res, curr, count) {

merges(res.data, [0, 1, 2], ['id', 'ziduan', 'ziduan'], 'demo_table')

}

});

使用文档：

1、tableCombine.js直接引用到页面里

2、在layui组件里elem: '#demo_table'的id应与done回调最后的'demo_table'一致，否则报错。

3、merges中的[0, 1, 2]是要合并的字段序列由左到右。

4、关键点一：要合并的列一定要浮动锁定fixed: 'left',否则报错。

5、关键点二：不能跳列锁定，如第0列锁 第1列不锁 第2列锁，也报错。

希望与大神交流再优化。放个效果图