layui框架实战案例(25):table组件筛选列记忆功能

即点击当前表格右上角筛选图标后，对表头进行显示隐藏勾选，再刷新页面依然保留当前筛选状态。

要实现layui表格组件的筛选列记忆功能，可以采取以下步骤：

1. 存储筛选数据：当用户进行筛选操作时，将筛选的数据以某种形式存储起来。可以选择将数据存储到本地缓存中，或者发送到服务器端进行存储。
2. 监听筛选事件：使用MutationObserver或其他事件监听器来监听表格组件的筛选事件。当用户进行筛选操作时，监听器会捕获到相关的事件并执行相应的操作。
3. 保存筛选状态：在监听到筛选事件后，将筛选的状态（如筛选的字段、筛选的条件等）保存下来。同样可以选择将状态保存到本地缓存中，或者发送到服务器端进行保存。
4. 恢复筛选状态：当用户重新打开页面或刷新页面时，从本地缓存或服务器端获取之前保存的筛选状态，并将其应用到表格组件上。

核心代码

 , cols: [function () {var arr = [{type: 'checkbox', fixed: 'left', width: 80}, {field: 'depart_name', title: '一级管理', sort: true}, {field: 'second_user_name', title: '二级管理', sort: true, hide: true}, {field: 'butler_name', title: '三级管理', sort: true, hide: true}, {field: 'poi_name', title: '客户名称', sort: true}, {field: 'poi_address', title: '客户地址', sort: true}, {field: 'poi_phone', title: '客户电话', sort: true}, {field: 'place', title: '位置调整', templet: '#checkPoint', unresize: true, align: 'center'}, {field: 'lock', title: '操作', templet: '#checkboxTpl', unresize: true, align: 'center', width: 120}];// 初始化筛选状态var local = layui.data('table-filter-lock');layui.each(arr, function (index, item) {if (item.field in local) {item.hide = local[item.field];}});return arr;}()],done: function () {// 记录筛选状态var that = this;that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function () {var input = $(this).prev()[0];// 此处表名可任意定义layui.data('table-filter-lock', {key: input.name, value: input.checked})});}

---

@漏刻有时