QQ扫一扫联系
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 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); // 这里假设你的表格 id 是 'test' 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。这可能并不适用于所有的情况,你可能需要根据你的实际代码进行调整。