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

本文主要是介绍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){// 这里才是真正的有效勾选res.data[i]["LAY_CHECKED"]='true';// 找到对应数据改变勾选样式，呈现出选中效果var index= res.data[i]['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是指分页中的idif(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') {temp_all_list.push(obj.data);} else {for (var i = 0; i < temp_table_list.length; i++) {temp_all_list.push(temp_table_list[i]);}}} else {let all_list = temp_all_list; // 使用临时数组，防止删除临时选中所有的数组错乱if (obj.type == 'one') {for (var i = 0; i < temp_all_list.length; i++) {if (temp_all_list[i].id == obj.data.id) {for (var k=0; k<all_list.length; k++){if (all_list[k].id == obj.data.id) {all_list.splice(k, 1);}}}}} else {for (var i = 0; i < temp_all_list.length; i++) {for (var j = 0; j < temp_table_list.length; j++) {if (temp_all_list[i].id == temp_table_list[j].id) {for (var k=0; k<all_list.length; k++){if (all_list[k].id == temp_table_list[j].id) {all_list.splice(k, 1);}}}}}}temp_all_list = all_list;}
});