开发干货-layui表格动态合并
背景简介
最近由于技术研究的任务较少,所以领导让参与实际项目开发,基本的增删改查就不说了,最近用的技术中稍微有点难度就是动态表格问题,vue,layui,原生table表格等,需要做动态的横向纵向合并,原生的table提供了表格合并属性,rowspan,colspan,但是项目中基本很少用到原生的table表格,大部分是js动态渲染的,例如layui.table,element-ui的table等,这些框架并未提供灵活的表格合并api,只能自己写了
动态表格实现思路
表格数据渲染,还是按照全部数据一行行渲染,渲染完毕后,再执行表格动态合并,借助合并参数实现动态合并.
合并参数结构如下:
[
{
rowIndex:'单元格行坐标',
colIndex:'单元格列坐标',
rowAndColSpan:{
rowspan:'合并rowspan'
colspan:'合并colspan'
}
}
]
layui 动态表格实现
// 渲染核心函数
//layui表格排列处理
function layuiTableRowAndColSpanHanle(tableDomId, rowAndColSpanData) {
var rows = $("[lay-id='" + tableDomId + "'] table>tbody").find("tr");
for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
var row = rows[rowIndex];
var cols = $(row).find("td");
for (var colIndex = 0; colIndex < cols.length; colIndex++) {
var rowAndColSpan = getRowAndColSpan(rowAndColSpanData, rowIndex, colIndex);
rowspanAndColspanHanle(rowAndColSpan, rows, cols, rowIndex, colIndex);
}
}
}
function rowspanAndColspanHanle(rowAndColSpan, rows, cols, currRowIndex, currColIndex) {
//等于0隐藏
if (rowAndColSpan.rowspan == 0 || rowAndColSpan.colspan == 0) {
$(cols[colIndex]).css("display", "none");
return;
}
//大于1处理
if (rowAndColSpan.rowspan > 1 || rowAndColSpan.colspan > 1) {
$(cols[currColIndex]).attr("rowspan", rowAndColSpan.rowspan);
$(cols[currColIndex]).attr("colspan", rowAndColSpan.colspan);
for (var i = 1; i < rowAndColSpan.rowspan; i++) {
//rowspan 隐藏后面的行
$(rows[currRowIndex + i]).find("td").eq(currColIndex).css("display", "none");
}
//colspan 隐藏右边列
for (var j = 1; j < rowAndColSpan.colspan; j++) {
$(rows[currRowIndex]).find("td").eq(currColIndex + j).css("display", "none");
}
}
}
//获取表格单元格 rowspan,colspan
function getRowAndColSpan(tableDataRowColspan, rowIndex, colIndex) {
for (i = 0; i < tableDataRowColspan.length; i++) {
var rc = tableDataRowColspan[i];
if (rc.rowIndex == rowIndex && rc.colIndex == colIndex) {
return rc.rowAndColSpan;
}
}
return {rowspan: 1, colspan: 1};
}
//表格渲染示例
layui.table.render({
elem: '#demoTable',
even: true,
skin: 'row',
cols: [[
{
field: 'f1', title: 'f1', width: 20 + '%',
},
{
field: 'f2', title: 'f2', width: 40 + '%'
},
{field: 'f3', title: 'f3', width: 20 + '%'},
{field: 'f4', title: 'f4', width: 20 + '%'},
]],
data: []//表格数据,
done: function (res, curr, count) {
var rowAndColSpanData = [
//第一行第一列 rowspan,colspan
{
rowIndex: 0,
colIndex: 0,
rowAndColSpan: {
rowspan: 6,
colspan: 1
}
},
//第1行第4列 rowspan,colspan
{
rowIndex: 0,
colIndex: 3,
rowAndColSpan: {
rowspan: 6,
colspan: 1
}
}
]
layuiTableRowAndColSpanHanle('demoTable', rowAndColSpanData);
}
});