layui-table动态列实现

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

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

基本思路：

1. 从后台获取数据，处理成数组类型
2. 声明一个二维数组，根据列需求动态添加元素作为动态列
3. 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 能否做到 动态列