記錄一下

參考：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筛选列 记忆功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。