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

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" />
		<!-- 注意：如果你直接复制所有代码到本地，上述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>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<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>

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

猜你喜欢