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

 

 

 

 

 頁面定義