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

 

 

 

 

 页面定义