layui-v2.5.6 表头本地存储记忆功能_layui v2.5.6官方文档-优快云博客

本文介绍了如何在layui-v2.5.6的表格组件中添加表头本地存储记忆功能，通过修改table.js文件，实现了根据URL路径个性化保存和恢复列隐藏状态。适合前端开发者了解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

以下是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();
                     }
                 })
             })
         })
     }
 }
 // 新增

紧接着下面几行找到 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
  }
  // 新增

原文链接：https://blog.youkuaiyun.com/zskg2010/article/details/106250842