贵州网站建设 零玖伍壹网络,微博指数查询,滨州企业做网站,苏州建筑设计公司排名即点击当前表格右上角筛选图标后#xff0c;对表头进行显示隐藏勾选#xff0c;再刷新页面依然保留当前筛选状态。
要实现layui表格组件的筛选列记忆功能#xff0c;可以采取以下步骤#xff1a;
存储筛选数据#xff1a;当用户进行筛选操作时#xff0c;将筛选的数据…即点击当前表格右上角筛选图标后对表头进行显示隐藏勾选再刷新页面依然保留当前筛选状态。
要实现layui表格组件的筛选列记忆功能可以采取以下步骤
存储筛选数据当用户进行筛选操作时将筛选的数据以某种形式存储起来。可以选择将数据存储到本地缓存中或者发送到服务器端进行存储。监听筛选事件使用MutationObserver或其他事件监听器来监听表格组件的筛选事件。当用户进行筛选操作时监听器会捕获到相关的事件并执行相应的操作。保存筛选状态在监听到筛选事件后将筛选的状态如筛选的字段、筛选的条件等保存下来。同样可以选择将状态保存到本地缓存中或者发送到服务器端进行保存。恢复筛选状态当用户重新打开页面或刷新页面时从本地缓存或服务器端获取之前保存的筛选状态并将其应用到表格组件上。
核心代码 , 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-filterLAY_TABLE_TOOL_COLS], function () {var input $(this).prev()[0];// 此处表名可任意定义layui.data(table-filter-lock, {key: input.name, value: input.checked})});}漏刻有时
