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
                    })
                });
            }

@漏刻有时