layui表格列动态显示或隐藏

可以使用Layui的表格组件进行列的动态显示或隐藏。Layui的表格组件提供了一个方法table.reload()，可以重新加载表格，传入的参数可以用来设置表格的配置项。通过设置配置项cols的值，可以实现列的动态显示或隐藏。

首先，需要定义一个按钮或其他的触发事件，通过该事件来触发列的显示或隐藏操作。例如，可以在表格的表头添加一个复选框，选中复选框时，显示选中的列，取消选中复选框时，隐藏选中的列。

然后，在按钮或触发事件的回调函数中，通过获取选中的列的索引（可以使用Layui的表格方法checkStatus()），并将其保存到一个数组中。然后，可以使用table.reload()方法重新加载表格，并将cols配置项中的unresize属性设置为true，以禁用表格的列宽拖动功能，最后将保存的列索引数组传入cols配置项中的hide属性，以隐藏对应的列。

以下是一个简单的示例代码：

HTML部分：

“`html

“`

JavaScript部分：

“`javascript

layui.use([‘table’, ‘form’], function() {

var table = layui.table;

var form = layui.form;

//渲染表格

table.render({

elem: ‘#demo’,

url: ‘xxx’, //表格数据接口

cols: [[

{type: ‘checkbox’},

{field: ‘id’, title: ‘ID’},

{field: ‘username’, title: ‘用户名’},

{field: ’email’, title: ‘邮箱’},

//…

]],

//其他配置项

});

//监听复选框的选中状态

form.on(‘checkbox(test)’, function(data){

var indexs = [];

$(‘table input[type=”checkbox”]:checked’).each(function(){

indexs.push($(this).parents(‘tr’).find(‘td’).index($(this).parent()));

});

//重新加载表格并隐藏选中的列

table.reload(‘demo’, {

cols: [{

unresize: true,

hide: indexs

}]

});

});

});

“`

以上示例中，当复选框选中时，通过获取选中复选框的索引，然后使用table.reload()重新加载表格，并在cols配置项中设置需要隐藏的列的索引。最后，重新渲染表格即可实现列的动态显示或隐藏。