开发干货-layui表格动态合并

开发干货-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);
    }
});

vue或其他数据表格,合同运用同样思路即可