layui.table 支持表格跨页多选的方法
发表于:2022-12-16 17:26:17浏览:1677次
layui版本:2.7.6
使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。
实现思路:1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新勾选和全选状态。
$('body').on('click','.add-question',function(){
let questionTable;
// 设置变量保存选中行信息
let ids = new Array();
// 保存当前页全部数据id,点击全选时使用
let tableIds = new Array();
let qBox = $(this).parents('.question-item');
layer.open({
title: '选择试题',
area: ['600px', '590px'],
type: 1,
content: '<div class="picker-table">\
<form class="layui-form pb-2">\
<div class="layui-input-inline" style="width:480px;">\
<input type="text" name="keywords" placeholder="试题" class="layui-input" autocomplete="off" />\
</div>\
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search_contract">提交搜索</button>\
</form>\
<div id="questionTable"></div></div>',
success: function () {
questionTable = table.render({
elem: '#questionTable'
, url: '/train/api/get_question'
, page: true //开启分页
, limit: 10
, where:{qids:get_qids()}
, cols: [[
{ type: 'checkbox', title: '选择' }
, { field: 'id', width: 80, title: '试题编号', align: 'center' }
, { field: 'title', title: '试题题干' }
]]
, done: function (res) {
// 设置当前页全部数据id到全局变量
tableIds = res.data.map(function (value) {
return value.id;
});
// 设置当前页选中项
$.each(res.data, function (idx, val) {
if (ids.indexOf(val.id) > -1) {
val["LAY_CHECKED"] = 'true';
//找到对应数据改变勾选样式,呈现出选中效果
let index = val['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').click();
form.render('checkbox'); //刷新checkbox选择框渲染
}
});
// 获取表格勾选状态,全选中时设置全选框选中
let checkStatus = table.checkStatus('test');
if (checkStatus.isAll) {
$('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
form.render('checkbox'); //刷新checkbox选择框渲染
}
}
});
//项目搜索提交
form.on('submit(search_contract)', function (data) {
questionTable.reload({ where: { keywords: data.field.keywords,qids:get_qids()}, page: { curr: 1 } });
return false;
});
// 监听勾选事件
table.on('checkbox(questionTable)', function (obj) {
if (obj.checked == true) {
if (obj.type == 'one') {
ids.push(obj.data.id);
} else {
for (let i = 0; i < tableIds.length; i++) {
//当全选之前选中了部分行进行判断,避免重复
if (ids.indexOf(tableIds[i]) == -1) {
ids.push(tableIds[i]);
}
}
}
} else {
if (obj.type == 'one') {
let i = ids.length;
while (i--) {
if (ids[i] == obj.data.id) {
ids.splice(i, 1);
}
}
} else {
let i = ids.length;
while (i--) {
if (tableIds.indexOf(ids[i]) != -1) {
ids.splice(i, 1);
}
}
}
}
});
},
btn: ['确定'],
btnAlign: 'c',
yes: function () {
if (ids.length > 0) {
console.log(ids);
$.ajax({
url: "/train/api/get_question",
type:'get',
data:{ids:ids},
success:function(res){
layer.closeAll();
console.log(res.data);
let tr='';
for(var i=0;i<res.data.length;i++){
tr+='<tr>\
<td width="100">'+res.data[i].id+'</td>\
<td width="100">'+res.data[i].score+'</td>\
<td width="100">'+res.data[i].cate+'</td>\
<td width="100">'+res.data[i].type_str+'</td>\
<td width="100">'+res.data[i].level_str+'</td>\
<td style="text-align:left;">'+res.data[i].title+'</td>\
<td width="100"><span class="red question-del">删除</span></td>\
</tr>';
}
qBox.find('table').append(tr).find('.question-none').remove();
}
});
}
else {
layer.msg('请先选择试题');
return false;
}
}
})
})