Layui 表格筛选临时存储cookie，Layui表格筛选触发事件

前言

将某一个表格的列筛选操作保存，下次刷新这个页面时还保留之前筛选的操作

实现方式

首先创建两个方法

这里我使用了localStorage

var tempCount = -1;
/*** 表格筛选存储获取-是否显示----------------------------------------------------* */
function setColumnHide(key) {if(!tempTableColumn){tempTableColumn = localStorage.getItem("user");tempTableColumn = tempTableColumn?JSON.parse(tempTableColumn):null;}if(tempTableColumn){if(tempTableColumn[key] == 1){return true;}else{return false;}}
}var columnArray = ['img','num','name','sex','age','phone','idcard'];
/*** 表格筛选触发事件-存储筛选----------------------------------------------------*/
function table_tool(e) {var temp = $(e.elem).attr("data-key")var obj = localStorage.getItem("user");obj = obj?JSON.parse(obj):{};var a = temp.split("-");if(e.elem.checked){obj[columnArray[Number(a[1])-1]] = 0;}else{obj[columnArray[Number(a[1])-1]] = 1;}localStorage.setItem("user", JSON.stringify(obj));
}

修改layui的js文件
本人使用的是layui2.6.8版本
只有一个layui.js，layui之前版本是在table.js里

打开layui.js或table.js搜索：LAY_TABLE_TOOL_COLS
然后找到触发事件，如图中所示：
红色框则是勾选筛选列的时候触发的事件
蓝色框则是我们需要加入的回调函数

// 判断是否有这个函数，如果有就执行，没有就不用执行
;typeof table_tool === "function" ?table_tool(e) : false;

Layui表格js中加入

{field : 'name', title : '姓名', width: '150', align : 'center', hide: setColumnHide("name")},

以上黄色图片是用Hbuild解压的（ctrl+shift+f）为了方便查找
实际上使用可不解压，如图：
注意：typeof前面要加入“;”分号

Layui 表格筛选临时存储cookie，Layui表格筛选触发事件相关推荐

layui循环数据并渲染_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
layUI踩坑：数据表格的监听工具条，点击事件没有反应
<%--类别展示--%> <table class="layui-hide" id="test"></table><% ...
Springboot整合layui之一个页面显示两张表格
该文章由作者精心整理与总结,详细记录了对问题的思考与解决过程,原创文章,转载请在文章明显位置注明出处与原文链接!大家一起成长!!! 需要在layui同一个页面中显示两个子页面,其中一个页面中的表格添加 ...
layui表格有边框_layui前端框架表格如何进行屏幕适配
匿名用户 1级 2017-07-03 回答标签:js代码 .com 效果 click .text jquer 参考定义 html 项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹 ...
Element Plus 跟踪表格数据总数，包括查询、筛选等操作
前言 Element Plus的表格组件提供了筛选功能前端项目中,如果表格使用的是后端分页,使用表格插件及分页器插件就可以了.这种情况下,前端的表格筛选被后端的分页条件查询取代了另一种情况:不分页 ...
xlsx表格怎么筛选重复数据_excel表格如何筛选重复数据在Excel表格的两列数据中提取不重复值的四种方法...
excel表格如何筛选重复数据在Excel表格的两列数据中提取不重复值的四种方法,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教大家设置 ...
怎样在表格中选出同一类_excel表格怎么将相同内容筛选出来
1 excel 表格怎么将相同内容筛选出来在一张 EXCEL 表格中 , 有两列不同且数量众多的的文字 , 如何快速又简便挑出两列当中相同的文字 . ,接下来举例简单的例子告诉大家 Excel ...

Layui 表格筛选临时存储cookie，Layui表格筛选触发事件

前言

实现方式

Layui 表格筛选临时存储cookie，Layui表格筛选触发事件相关推荐

最新文章

热门文章