layui-table动态列实现 转

转自：https://blog.csdn.net/Rec_Mervyn/article/details/105367817

基本思路：
从后台获取数据，处理成数组类型
声明一个二维数组，根据列需求动态添加元素作为动态列
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
});