layui表格筛选列不随页面刷新重置

朴灿烈づ我的快乐病毒、 2022-10-09 06:30 302阅读 0赞

Layui table 自带筛选列的功能，但是这个筛选列会随着页面的刷新重置。用户第二次进入页面或者进行table手工渲染，都会使得筛选项重置。  
本例利用layui自带的本地储存进行筛选列的数据保存，以达到刷新页面不会重置筛选列的效果。

只需要改变引入路径就可以完全运行起来的项目.

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Layui</title>
    		<meta name="renderer" content="webkit">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<link rel="stylesheet" type="text/css" href="css/layui.css" />
    		
    	</head>
    	<body>
    		
    		<table class="layui-hide" id="toolbar" lay-filter="toolbar"></table>
    
    		<script src="layui.js" type="text/javascript" charset="utf-8"></script>
    		<script src="lay/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    		
    		<script>
    			layui.use(['table', 'form'], function() {
    				var table = layui.table;
    				var $ = layui.$; //等同于jquery
    				var form = layui.form;
    				var cols = layui.data('cols').toolbar; //从存储中获取列记录
    				if (cols == undefined) {
    					cols = [{
    						type: 'checkbox',
    						fixed: 'left'
    					}, {
    						field: 'id',
    						title: 'ID',
    						width: 80,
    						fixed: 'left',
    						unresize: true,
    						sort: true
    					}, {
    						field: 'username',
    						title: '用户名',
    						width: 120,
    						edit: 'text',
    					}, {
    						field: 'email',
    						title: '邮箱',
    						width: 150,
    						edit: 'text',
    					}, {
    						field: 'sex',
    						title: '性别',
    						width: 80,
    						edit: 'text',
    						sort: true,
    					}]
    				}
    				table.render({
    					elem: '#toolbar',
    					url: '/test/table/demo1.json',
    					toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
    					defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    						title: '提示',
    						layEvent: 'LAYTABLE_TIPS',
    						icon: 'layui-icon-tips'
    					}],
    					title: '用户数据表',
    					cols: [cols],
    					page: true
    				});
    				//工具栏事件监听
    				table.on('toolbar(toolbar)', function(obj) {
    					switch (obj.event) {
    						case 'LAYTABLE_COLS': //筛选列点击事件
    							setCols(obj);
    							break;
    					}
    				})
    				//保存筛选列
    				function setCols(obj) {
    					//点击筛选列面板里checkbox时保存
    					layui.$(".layui-form-checkbox").click(function() {
    						var cols = obj.config.cols[0]; //这里获取的是一个对象数组,保存了表格渲染时配置的列
    						layui.data('cols', {
    							key: obj.config.id,
    							value: cols
    						})
    					})
    				}
    			});
    		</script>
    	</body>
    </html>