Remove Layui Table Column Dynamically
To dynamically delete a table column in layui, you need to modify the table’s configuration options. Here are the specific steps:
- To obtain a table instance: First, it is necessary to get the table instance by using the table’s id or class, for example:
var table = layui.table;
var tableIns = table.render({
elem: '#testTable',
url: '/data',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
- Change table settings: After obtaining the table instance, you can dynamically delete table columns by modifying the cols configuration option.
// 动态删除表格列
var newCols = tableIns.config.cols[0].filter(function(col) {
return col.field !== 'age'; // 删除字段为'age'的列
});
tableIns.reload({
cols: [newCols]
});
The code above will delete the columns in the table that are marked as ‘age’, then reload the table to achieve the effect of dynamically removing columns.
It is important to note that currently, layui table does not offer a direct API method to delete table columns, so you need to dynamically remove columns by modifying the table configuration options.