layui-table动态列实现

最新推荐文章于 2021-08-17 15:52:17 发布

原创最新推荐文章于 2021-08-17 15:52:17 发布 · 1.2w 阅读

20 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在layui中实现table动态列的功能。通过从后台获取数据并处理为数组，然后动态添加元素到二维数组中作为动态列，最后在table渲染时指定数据和列。文中提供了一个不依赖后台数据的简单示例来展示动态列的创建过程。

前两天项目遇到一个场景，使用layui table时，除了固定列之外，还需要使用动态列来展示一些动态数据。

mysql查询动态行转动态列，并使用mybatis执行语句

基本思路：

从后台获取数据，处理成数组类型
声明一个二维数组，根据列需求动态添加元素作为动态列
table渲染时指定数据和列

套路：


$.ajax({
    url: url
    , type : "GET"
    , dataType: "JSON"
    , success: function(res) {

        //处理数据，tableDate
        //生成动态列二维数组col

        table.render({
            elem: "#tableId"
            , id: tableId
            , data: tableData
            , cols: col
        });
    }
});

举例（这里就不使用后台获取数据的方式了，直接声明）：

//固定列
//表格数据tableData
var tableData = [
    {
        "name": "詹溪"
        ,"age": 18
        ,"class": "高三（2）班"
    },
    {
        "name": "徐柯"
        ,"age": 18
        ,"class": "高三（3）班"
    },
    {
        "name": "蓝毅"
        ,"age": 17
        ,"class": "高三（3）班"
    },
    {
        "name": "温邱"
        ,"age": 18
        ,"class": "高三（3）班"
    }
];

//固定列二维数组
var col = [[
    {field: "name", title: "姓名"}
    , {field: "age", title: "年龄"}
    , {field: "class", title: "班级"}
]];

生成动态列（重点）：

//动态列
var subjectField = ["math", "chinese", "english"];
var subjectTitle = ["数学", "语文", "英语"];

//给tableData动态添加数据
for (var i = 0; i < subjectField.length; ++i) {
    for (var j = 0; j < tableData.length; ++j) {
        tableData[j][subjectField[i]] = Math.floor((Math.random()*100)+1);
    }
}

//动态添加列属性
for (var i = 0; i < subjectField.length; ++i) {
    //向数组插入元素：splice(index, howmany, items...)
    //index要插入的位置
    //howmany从该位置删除多少项元素
    //items要插入的元素
    //col[0],注意col是二维数组
    col[0].splice(col[0].length, 0, {field: subjectField[i], title: subjectTitle[i]});
}
//

//渲染table
table.render({
    elem: "#tableId"
    , id: tableId
    , data: tableData
    , cols: col
});

效果：
在这里插入图片描述
参考资料：
fly社区 - layui table 能否做到动态列