layui tabel筛选列 记忆功能

记录一下

参考：https://www.cnblogs.com/zuochanzi/p/14721567.html
Mutation Observer：https://blog.csdn.net/u012060033/article/details/89791267

代码：

//筛选框记忆功能//1页面打开,先读本地缓存//2读入cols 设置hide true 或者false//3渲染table//4加入 筛选框选择框事件获取 并设置本地缓存var cols=[[{type: 'checkbox'},{field: 'expenseId', hide: true, title: '报销id'},{field: 'applyPerson',hide: false,title: '申请人'},{align: 'center', toolbar: '#tableBar', title: '操作',minWidth:250}]];intCols();function intCols(){for (var i=0;i<cols[0].length;i++){if(cols[0][i].field!=undefined){let localfield='test'+cols[0][i].field;//keylet hidevalue =window.localStorage.getItem(localfield);//获取本地缓存console.log(hidevalue);if(hidevalue==='false'){cols[0][i].hide=false;//显示}else if(hidevalue==='true'){cols[0][i].hide=true;//不显示 }}}} // 选择需要观察变动的节点const targetNode =document.getElementsByClassName('layui-table-tool');//document.getElementById('some-const targetNode1 =document.getElementsByClassName('layui-table-tool-self')[0];//document.getElementById('some-id');// 观察器的配置（需要观察什么变动）/** childList：子节点的变动。* attributes：属性的变动。* characterData：节点内容或节点文本的变动。* subtree：所有后代节点的变动。* */const config = { attributes: true, childList: true, subtree: true,characterData:true };// 当观察到变动时执行的回调函数const callback = function(mutationsList, observer) {/* console.log('mutationsList'+mutationsList);console.log('observer'+observer);*/// Use traditional 'for loops' for IE 11for(let mutation of mutationsList) {if (mutation.type === 'childList') {console.log('A child node has been added or removed');}else if (mutation.type === 'attributes') {//console.log(mutation.target.innerText);//先根据innertext 列名称 对cols 进行field 查询,查到field 可以找到本地缓存的字段,约定,本地缓存的命名规则为表名字母缩写_加field名组成,防止冲突var field="";for (var i=0;i<cols[0].length;i++){if(cols[0][i].title===mutation.target.innerText) //标题相同 则取field{field=cols[0][i].field;break;}}if(field!==""){// 组装缓存keylet localkey='test'+field;//判断value值if(mutation.target.classList[2]!=undefined) //说明2: "layui-form-checked" 复选框是已选择的,说明此列是在表中显示的{window.localStorage.setItem(localkey,false);}else //没被选择,说明此列不在table中显示{window.localStorage.setItem(localkey,true);}}}else if (mutation.type === 'subtree'){console.log('subtree');}else if (mutation.type === 'characterData'){console.log('characterData');}}};// 创建一个观察器实例并传入回调函数const observer = new MutationObserver(callback); // 以上述配置开始观察目标节点observer.observe(targetNode1, config);

总结

以上是生活随笔为你收集整理的layui tabel筛选列 记忆功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。