layui table 利用localStorage存儲表頭

注：官方文檔地址：https://www.layui.com/doc/

社區解決方案：https://fly.layui.com/jie/47318/

1.如果引用的是layui.all.js進行開發，修改源碼

1.1 找到F.prototype.events這個位置

加上如下代碼：tableFlag自定義在需要自定義表頭的地方，注意所有的標簽名稱確保唯一！

 if (tableFlag != "") {
            var deploy = localStorage.getItem("TableHidden" + tableFlag + "");
            var arr = new Boolean(deploy) ? eval(deploy) : [];
            $.each(arr, function (index, ele) {
                var checked = ele.check;
                var key = ele.key;
                var parentKey = ele.parentKey;
                layui.each(o.cols, function (i1, item1) {
                    layui.each(item1, function (i2, item2) {
                        if (i1 + '-' + i2 === key) {
                            var hide = item2.hide;
                            //同步勾選列的hide值和隱藏樣式
                            item2.hide = !checked;
                            a.elem.find('*[data-key="' + o.index + '-' + key + '"]')[checked ? 'removeClass' : 'addClass'](f);
                            //根據列的顯示隱藏，同步多級表頭的父級相關屬性值
                            if (hide != item2.hide) {
                                a.setParentCol(!checked, parentKey);
                            }
                            //重新適配尺寸
                            a.resize();
                        }
                    })
                })
            })
        };

1.2 找到LAYTABLE_COLS

加如下代碼頁面勾選列名將其持久化到本地localStorage

 

                             //start
                             if (tableFlag != "") {
                                var tableHidden = "";
                                $('.layui-unselect.layui-form-checkbox').each(function (index, ele) {
                                    var key = $(ele).siblings('input').attr('data-key');
                                    var parentkey = $(ele).siblings('input').attr('parentkey');
                                    var checked = $(ele).attr('class').indexOf('layui-form-checked') !== -1 ? true : false;
                                    tableHidden += "{'key':'" + key + "','check':" + checked + ",'parentKay':" + parentkey + "},";
                                })
                                localStorage.setItem("TableHidden" + tableFlag + "", "[" + tableHidden + "]");
                               //end

 

2.如果是模塊化引用則修改table.js

 

 

 

 

 頁面定義