layui数据表格列动态显示或隐藏
时间: 2023-08-08 18:12:27 浏览: 361
layui使用数据表格实现购物车功能
您好,关于layui数据表格列动态显示或隐藏的问题,您可以使用表格的列渲染属性来实现。具体来说,您可以通过编写一个函数来控制每一列的显示或隐藏。例如,在表格渲染时,您可以将需要隐藏的列的lay-hide属性设置为true,并在函数中判断该属性来决定该列是否显示。
示例代码如下:
```
//渲染表格
table.render({
elem: '#demo',
url: '/data/',
cols: [[
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱', lay-hide: true},
{field: 'phone', title: '电话', lay-hide: true},
]],
done: function (res, curr, count) {
//隐藏指定列
hideColumn('email');
}
});
//隐藏列函数
function hideColumn(column) {
var table = layui.table;
var hideIndex = -1;
$.each(table.config.cols[0], function (index, item) {
if (item.field == column) {
hideIndex = index;
return false;
}
});
if (hideIndex != -1) {
$(table.elem).find('.layui-table-header th').eq(hideIndex).hide();
$(table.elem).find('.layui-table-body td').each(function () {
$(this).find('div.layui-table-cell').eq(hideIndex).hide();
});
}
}
```
在上述代码中,我们定义了一个hideColumn函数来隐藏指定列。在表格渲染完成之后,我们可以通过调用该函数来实现列的动态隐藏。在函数中,我们先通过遍历表格的列来获取需要隐藏的列的索引,然后分别隐藏表头和表格体中的相应列。
阅读全文