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;//key
                    let 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 11
        for(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!=="")
                {
                    // 组装缓存key
                    let 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);