Layui表格复选框下一页后保持选中，table复选框checkbox跨页保持复选状态

前言

由于layui表格切换其他页码之后前面选中的就会被刷新，只能选择当前页的数据，这样就让人体验不好，我们可以使用以下方式实现保持每页的选中。
实现内容，layui表格复选框点击下一页后前面选中的保持选中。

效果

实现

创建两个全局的集合变量

var temp_table_list = []; // 临时保存每页的所有数据
var temp_all_list = []; // 临时保存所有选中的数据

列表实现

table.render({
	elem: '#user_table',
	id: 'user_table',
	url: 'personnel/select',
	title: '用户管理',
	skin: 'line',
	page: true,
	cols: [[
		{type: 'checkbox'},
		{field: 'eno', title: '工号', sort: true, align: 'center'},
		{field: 'name', title: '姓名', sort: true, align: 'center'},
		{field: 'dnames', title: '部门', sort: true, align: 'center'},
		{field: 'sex', title: '性别', sort: true, align: 'center'},
		{field: 'phone', title: '手机号码', sort: true, align: 'center'},
	]]
	, done: function (res, currPage, count) {
		temp_table_list = res.data;
		temp_table_list.forEach(function(o, i) {
			for (var j=0; j<temp_all_list.length; j++){
				if(temp_all_list[j].id == o.id){
					// 这里才是真正的有效勾选
					o["LAY_CHECKED"]='true';
					// 找到对应数据改变勾选样式，呈现出选中效果
					var index= o['LAY_TABLE_INDEX'];
					$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
					$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
				}
			}
		})
		// 设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
		var checkStatus = table.checkStatus('user_table');//这里的studentTable是指分页中的id
		if(checkStatus.isAll){// 是否全选
			// layTableAllChoose
			$('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', true);//data-field值默认为0，如果在分页部分自定义了属性名，则需要改成对应的属性名
			$('.layui-table th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');//data-field值默认为0，如果在分页部分自定义了属性名，则需要改成对应的属性名
		}
	}
});

监听表格复选框

// 选中行监听（临时存储复选数据，用于列表复选框回显上一页）
table.on('checkbox(user_table)', function (obj) {
    if (obj.checked == true) {
		if (obj.type == 'one') {
			var index = checkAllList(temp_all_list, obj.data);
			if (index == -1){
				temp_all_list.push(obj.data);
			}
		} else {
			temp_table_list.forEach(function(o, i) {
				var index = checkAllList(temp_all_list, o);
				if (index == -1){
					temp_all_list.push(o);
				}
			})
		}
	} else {
		var all_list = []; // 使用临时数组，防止删除临时选中所有的数组错乱
		if (obj.type == 'one') {
			temp_all_list.forEach(function(o, i) {
				if (o.id != obj.data.id) {
					all_list.push(o);
				}
			})
		} else {
			temp_all_list.forEach(function(o, i) {
				var index = checkAllList(temp_table_list, o);
				if (index == -1){
					all_list.push(o);
				}
			})
		}
		temp_all_list = all_list;
	}
});

/**
 * ---------------------------------------------------------------------------------------------
 * 判断数组重复
 */
function checkAllList(list, obj) {
	for (var j = 0; j < list.length; j++) {
		if (list[j].id == obj.id){
			return j;
		}
	}
	return -1;
}

获取选中的数据

<a lay-submit class="layui-btn layui-btn-sm layui-btn-normal" lay-filter="userSelected">
	<i class="layui-icon">&#xe605;</i>
	确认选择
</a>

最终数据获取就是 temp_all_list

// 确认
form.on('submit(userSelected)', function (data) {
	if (temp_all_list.length > 0) {
	
		// 处理temp_all_list获取关键数据
	}else {
		layMin.tips({iconIndex: 2, msg: "请选择人员"});
	}
	return false;
})

其他

使用以下方式可以将全选的数据清空

<a lay-submit class="layui-btn layui-btn-sm layui-btn-primary" lay-filter="userClear">
	<i class="layui-icon">&#x1006;</i>
	清空选择
</a>

// 清空
form.on('submit(userClear)', function (data) {
	temp_all_list = [];
	var checkStatus = table.checkStatus('user_table');
	if(checkStatus.isAll){
		$('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', false);
		$('.layui-table th[data-field="0"] input[type="checkbox"]').next().removeClass('layui-form-checked');
	}
	temp_table_list.forEach(function(o, i) {
		o["LAY_CHECKED"]='';
		var index= o['LAY_TABLE_INDEX'];
		$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', false);
		$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().removeClass('layui-form-checked');
	})
	return false;
})