layui 的 table 组件默认并没有提供筛选列的记忆功能。要实现这个功能,你需要在筛选列发生变化时,将筛选条件存储起来,然后在页面刷新时,重新加载这些筛选条件。
以下是一个基本的实现思路:
存储筛选条件:当用户更改筛选条件时,你可以通过监听表格的筛选事件(例如,使用 layui 的 table.on('filter(test)', function(obj){...}
),将筛选条件存储到浏览器的 localStorage 或者 cookie 中。
加载筛选条件:在页面加载时(例如在 layui.use(['table', 'form'], function(){...}
中),你可以从 localStorage 或 cookie 中读取之前存储的筛选条件,并应用到表格的筛选中。
以下是一个简单的示例代码:
layui.use(['table', 'form'], function(){
var table = layui.table;
var form = layui.form;
table.render({
elem: '#test'
,url:'/demo/table/user/'
,toolbar: '#toolbarDemo'
,defaultToolbar: []
,cols: [[
{type: 'numbers'}
,{field:'id', title:'ID', width:80, sort: true, fixed: 'left'}
,{field:'username', title:'用户名', width:80}
,{field:'email', title:'邮箱', width:175, sort: true}
,{field:'sex', title:'性别', width:80, sort: true, filter: {
type: 'select',
options: {
'0': '男'
,'1': '女'
}
}}
,{field:'city', title:'城市', width:80}
,{field:'sign', title:'签名', width: 175}
,{field:'experience', title:'积分', width: 80, sort: true}
,{field:'score', title:'评分', width: 80, sort: true}
,{field:'classify', title:'分类', width:80}
,{field:'wealth', title:'财富', width: 135, sort: true}
]]
,page: true
});
table.on('filter(test)', function(obj){
console.log(obj.field);
console.log(obj.value);
localStorage.setItem('tableFilter', JSON.stringify({field: obj.field, value: obj.value}));
});
window.onload = function() {
var filter = localStorage.getItem('tableFilter');
if (filter) {
filter = JSON.parse(filter);
var $tableFilter = $('#test_filter_' + filter.field);
if ($tableFilter.length > 0) {
$tableFilter.val(filter.value);
$tableFilter.trigger('change');
}
}
};
});
这个示例中,我们使用了浏览器的 localStorage 来存储筛选条件。当然,你也可以选择使用 cookie 或者其他的方式来存储。注意,localStorage 的存储是有限制的,而且它会被存储在用户的浏览器中,所以如果你的筛选条件非常大或者包含敏感信息,你可能需要考虑其他更安全的存储方式。
另外,这个示例假设你的表格的 id 是 'test',并且筛选的字段名会直接拼接到 '#test_filter_' 后面作为筛选输入框的 id。这可能并不适用于所有的情况,你可能需要根据你的实际代码进行调整。