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') { 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; } });

获取选中的数据

<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"]='false'; 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; })