JS实现layui table筛选框记忆功能

碰到表中列很多如下表

JS实现layui table筛选框记忆功能_第1张图片

使用layui table的筛选功能.选完之后呢,关掉浏览器再打开或者换个页面再打开的时候,选择就白选了.这种情况下,客户就要求加个记忆功能.让她下次再打开的时候,还能记忆上次选择的

网上几乎没有这种使用的例子.总之是没有找到相关资料,于是我就把实现的过程记录下来,方便大家用到的时候做个参考.

实现: 记忆的数据可以存到数据库,可以存到本地缓存

本案例放入本地缓存的方式

使用MutationObserver 实现监控点击事件.

由于筛选的跳窗是点开后后加的代码,所以一般的事件onclick是触发不到的.. 就是点击筛选按钮,此时加载跳出框代码, 也就在此是注册onclik 点击事件是不行的. 如果早注册事件,早于页面元素注册,也是抓不到事件滴.页面还没渲染出来,早早的注册了页面里边的点击事件,后来页面渲染出来后,点击是无法响应的,有个先后顺序.

经过控制台点击按钮分析页面代码等等操作

/////筛选框记忆功能
//1页面打开,先读本地缓存
//2读入cols 设置hide true 或者false
//3渲染table
//4加入 筛选框选择框事件获取 并设置本地缓存



到此这篇关于实现layui table筛选框记忆功能的文章就介绍到这了,更多相关layui table筛选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(JS实现layui table筛选框记忆功能)