康巴什网站建设市场营销案例

前言

由于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是指分页中的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;}
});

获取选中的数据

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