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

news2025/1/10 2:08:34

即点击当前表格右上角筛选图标后,对表头进行显示隐藏勾选,再刷新页面依然保留当前筛选状态。
在这里插入图片描述

要实现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
                    })
                });
            }

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1321343.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leecode-LCR 017. 最小覆盖子串(golang版本)

leecode最小覆盖字串 leecode链接地址 给定两个字符串 s 和 t 。返回 s 中包含 t 的所有字符的最短子字符串。如果 s 中不存在符合条件的子字符串,则返回空字符串 “” 。 如果 s 中存在多个符合条件的子字符串,返回任意一个。 题解 func minWindow(…

电脑屏幕怎么调大小?分享4个实用操作!

“我最近在使用电脑时总感觉电脑屏幕看起来不太对劲,好像字体被刻意放大了,看起来很不舒服,想问问有什么方法可以解决这个问题吗?” 电脑屏幕的正常显示是我们使用电脑的重要前提之一。如果电脑屏幕设置或显示不正确,会…

微信Windows版-无效的WeChatWin.dll文件,错误码126

更新的微信Windows最新版本,突然有一天打开微信提示“无效的WeChatWin.dll文件 错误码 ErrorCode:126,点击“确定”下载最新版本”。 卸载重新安装跟到windows目录下替换WeChatWin.dll皆无效 该解决方案适用于Windows系统:Windows7、Windows10、Windows…

ModuleNotFoundError: No module named ‘openai.error‘

ModuleNotFoundError: No module named ‘openai.error’ result self.fn(*self.args, **self.kwargs) File “H:\chatGPTWeb\chatgpt-on-wechat\channel\chat_channel.py”, line 168, in _handle reply self._generate_reply(context) File “H:\chatGPTWeb\chatgpt-on-wec…

JavaOOP篇----第四篇

系列文章目录 文章目录 系列文章目录前言一、Char类型能不能转成int类型?能不能转化成string类型,能不能转成double类型二、什么是拆装箱?三、Java中的包装类都是那些? 前言 前些天发现了一个巨牛的人工智能学习网站,…

数据安全传输基础设施平台(二)

5安全传输平台总体设计 5.1 方案特点 规范化:严格遵循各种相关规范设计。独立性:系统各子系统间互相独立,在保持系统间接口的前提下,各系统间的升级互不干扰。最小耦合性:各子系统进行严格功能分解,每个子…

基于云主机的k8s环境搭建

1. 申请三台云主机(按量付费即可) 内网IP配置节点角色172.17.0.92C4Gk8s-master172.17.0.82C2Gk8s-node1172.17.0.172C2Gk8s-node2 2. 安装Kubernetes集群(全部节点执行以下操作) 关闭防火墙 systemctl stop firewalld systemctl disable firewalld关闭selinux sed -i s/e…

Android Studio(3.6.2版本)安装 java2smali 插件,java2smali 插件的使用方法简述

一、Android Studio(3.6.2版本)安装 java2smali 插件 1、左上角File—>Setting,如下图 2、Setting界面中:点击Plugins—>选择右侧上方Marketplace—>搜索栏输入java2smali,如下图 3、点击Install按钮—>点…

L1-053:电子汪

题目描述 据说汪星人的智商能达到人类 4 岁儿童的水平,更有些聪明汪会做加法计算。比如你在地上放两堆小球,分别有 1 只球和 2 只球,聪明汪就会用“汪!汪!汪!”表示 1 加 2 的结果是 3。 本题要求你为电子宠…

文件拷贝记录丨电脑文件操作拷贝记录监控

最近在我们后台看到了一则这样的咨询: 问我们是否可以查看员工一天做了什么,电脑上打开了什么文件,电脑上的文件操作记录有哪些 叮咚,当然,我们的软件可以实现啦。 具体的操作步骤,我这里演示一下↓ 1、…

基于Java SSM框架实现体育竞赛运动会成绩裁判管系统项目【项目源码+论文说明】

基于java的SSM框架实现体育竞赛运动会成绩裁判管系统演示 摘要 体育竞赛是各种体育体育项目比赛的总称。是在裁判员的主持下,按统一的规则要求,组织与实施的体育员个体或体育队之间的竞技较量,是竞技体育与社会发生关联,并作用于…

Linux中ll -h和du -h 查看的文件大小,同一个文件du -h的结果大很多

当使用 ll -h 和 du -h 查看同一个文件的大小时,可能会看到两者的结果不同,这是因为它们计算文件大小的方式有所不同。 ll -h 的结果: ll -h(或其完整形式 ls -lh)会显示文件的大小,但这个大小可能只是文件…

JS的浅拷贝和深拷贝

首先理解什么是浅拷贝和深拷贝: 浅拷贝: 浅拷贝只会复制对象的第一层属性,而不会递归地复制嵌套的对象。浅拷贝仅复制对象的引用,新对象和原始对象仍然共享相同的引用,因此对新对象的修改可能会影响到原始对象。浅拷…

聊聊如何实现热插拔AOP

前言 之前偶然看到一篇文章利用aop实现热拔插(类似于插件),里面的实现挺好玩。今天我们也来玩一把 前置知识 Advice: org.aopalliance.aop.Advice “通知”,表示 Aspect 在特定的 Join point 采取的操作。包括 “around”, “b…

Elasticsearch 向量相似搜索

Elasticsearch 向量相似搜索的原理涉及使用密集向量(dense vector)来表示文档,并通过余弦相似性度量来计算文档之间的相似性。以下是 Elasticsearch 向量相似搜索的基本原理: 向量表示文档: 文档的文本内容经过嵌入模型(如BERT、Word2Vec等)处理,得到一个密集向量(den…

【git学习笔记 01】打标签学习

文章目录 一、声明二、对标签的基本认知什么是标签?为什么要打标签?如何生成类似github中readme的图标 三、标签相关命令四、示例操作 一、声明 本帖持续更新中如有纰漏,望批评指正!参考视频链接,非常感谢原作者&…

物流运输小程序制作实战教程

随着互联网的发展,越来越多的企业开始涉足物流行业。在这个竞争激烈的市场中,拥有一个高效、便捷、可靠的小程序,可以帮助物流企业在同行业中脱颖而出。那么如何制作一个物流运输小程序呢?接下来,我们将通过实战教程&a…

【智慧之窗】AI驱动产品探索

一.初识 ChatGPT ChatGPT 是由 OpenAI 开发的自然语言处理(NLP)模型,基于 GPT(Generative Pre-trained Transformer)架构。GPT 系列的模型旨在理解和生成自然语言文本。ChatGPT 专注于支持对话性任务,即与…

【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统(四)用户管理、部门管理模块

第一篇:【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统(一)搭建项目 第二篇:【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统(二)日志输出中间件、校验token中间件、配置路由、基础工具函数。 …

向华为学习:基于BLM模型的战略规划研讨会实操的详细说明,含研讨表单(四)

2023年只剩下不到10天了,如何科学、系统地制定2024年的公司战略?如果您还没有找到好的方法,或者对过去的方法不是很满意,或者想探索习方法,不妨来看看华为和许多标杆企业在用的——基于BLM模型来组织战略规划。 前面三…