在 layui 的 table 组件中，可以通过 `initComplete` 和 `onFilter` 事件来实现列筛选功能。
1. `initComplete` 事件
`initComplete` 事件会在表格渲染完成后触发，可以在这个事件中对表格进行一些初始化操作。以下是一个在 `initComplete` 事件中实现列筛选的示例代码：
```
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#tableId',
url: '数据接口地址',
cols: [[
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: '名称', width: 120 },
{ field: 'age', title: '年龄', width: 80 },
{ field: 'sex', title: '性别', width: 80 }
]],
page: true,
limit: 10,
height: 'full-200',
initComplete: function(){
// 获取表格头部的所有列
var columns = this.config.cols[0];
// 遍历列，为每一列添加筛选功能
for(var i = 0; i < columns.length; i++){
if(columns[i].field){
// 为当前列添加筛选框
var th = $('.layui-table thead th').eq(i);
th.append('<input type="text" class="layui-input" lay-filter="' + columns[i].field + '">');
}
}
}
});
});
```
在上述代码中，`initComplete` 事件中遍历了表格的所有列，为每一列添加了一个文本框用于筛选。其中，`columns[i].field` 表示列的字段名，可以作为筛选框的 lay-filter 属性值。当用户在筛选框中输入文本时，可以通过 `onFilter` 事件来实现筛选功能。
2. `onFilter` 事件
`onFilter` 事件会在用户点击筛选框或者清空筛选框时触发，可以在这个事件中获取用户输入的筛选条件，并重新渲染表格。以下是一个在 `onFilter` 事件中实现列筛选的示例代码：
```
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#tableId',
url: '数据接口地址',
cols: [[
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: '名称', width: 120 },
{ field: 'age', title: '年龄', width: 80 },
{ field: 'sex', title: '性别', width: 80 }
]],
page: true,
limit: 10,
height: 'full-200',
initComplete: function(){
// 获取表格头部的所有列
var columns = this.config.cols[0];
// 遍历列，为每一列添加筛选功能
for(var i = 0; i < columns.length; i++){
if(columns[i].field){
// 为当前列添加筛选框
var th = $('.layui-table thead th').eq(i);
th.append('<input type="text" class="layui-input" lay-filter="' + columns[i].field + '">');
}
}
}
});
// 监听列筛选事件
table.on('filter', function(obj){
var where = {};
// 获取所有筛选条件
$.each(obj.where, function(key, value){
if(value){
where[key] = value;
}
});
// 重新渲染表格
table.reload('tableId', {
where: where
});
});
});
```
在上述代码中，`table.on('filter', function(obj){})` 监听列筛选事件，获取所有筛选条件，并通过 `table.reload` 方法重新渲染表格。`obj.where` 表示所有筛选条件组成的对象，其中键值对的键是列的字段名，值是用户输入的筛选条件。在重新渲染表格时，需要将筛选条件作为参数传递给 `table.reload` 方法的 `where` 属性。
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
