layui-v2.5.6 表头本地存储记忆功能

网上很多都是低版本layui的做法,以下是2.5.6版本的,本人亲测有效,修改modules文件夹下的table.js文件

1、找到F.prototype.events = function () { var e, i = this, a = i.config, o = t("body"), c = {}, s = i.layHeader.find("th"), h = ".layui-table-cell", p = a.elem.attr("lay-filter");这一块代码,再下面加上以下代码:

var tableFlag = window.location.pathname.replace(new RegExp('/', 'g'), "_");
if (typeof tableFlag !== "undefined" && tableFlag != "") {
    var deploy = localStorage.getItem("TableHidden" + tableFlag + "");
    if(deploy != null){
        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(a.cols, function (i1, item1) {
                layui.each(item1, function (i2, item2) {
                    if (i1 + '-' + i2 === key) {
                        var hide = item2.hide;
                        //同步勾选列的hide值和隐藏样式
                        item2.hide = !checked;
                        i.elem.find('*[data-key="' + i.index + '-' + key + '"]')[checked ? 'removeClass' : 'addClass'](f);
                        //根据列的显示隐藏,同步多级表头的父级相关属性值
                        // if (hide != item2.hide) {
                        //     a.setParentCol(!checked, parentKey);
                        // }
                        //重新适配尺寸
                        i.resize();
                    }
                })
            })
        })
    }
}

注:tableFlag也可以每个页面单独定义,我这为了每个页面都能直接用就用路由来处理了

2、紧接着下面几行找到 n.on("checkbox(LAY_TABLE_TOOL_COLS)", function (e) {, 增加以下代码:

if (typeof tableFlag !== "undefined" && 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('data-parentkey');
        var checked = $(ele).attr('class').indexOf('layui-form-checked') !== -1 ? true : false;
        tableHidden += "{'key':'" + key + "','check':" + checked + ",'parentKey':" + (parentkey ? parentkey : "''") + "},";
    })
    localStorage.setItem("TableHidden" + tableFlag + "", "[" + tableHidden + "]");
    //end
}

至此就ok了,勾选某个table中的某几列隐藏,之后再打开这个页面发下之前隐藏的列被隐藏了,实现记忆功能

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值