2020-10-16
layui.table(表格)跨页多选
layui版本:2.5.6
使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。
实现思路,1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新勾选和全选状态。
已有大佬实现类似功能,但稍有瑕疵,我追加改进,大佬文章:https://blog.****.net/zjh19961213/article/details/96482133
代码片段,第一次发,不知道怎么给代码着色,见谅:
//保存所有页的数据,仅适用于数据量小的时候
var currentData = [];
// 设置全局变量以保存选中行信息
let ids = new Array();
done: function (res, e) {
//res是数据,e是当前页码
//重写选择功能
// 设置当前页选中项
$.each(res.data, function (idx, val) {
if (ids.indexOf(val.nodecode) > -1) {
val["LAY_CHECKED"] = 'true';
//找到对应数据改变勾选样式,呈现出选中效果
let index = val['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked','true');
form.render('checkbox'); //刷新checkbox选择框渲染
}
});
// 获取表格勾选状态,全选中时设置全选框选中
//重载翻页事件
$('.layui-laypage-default a[data-page],.layui-laypage-btn').unbind('click').bind('click', function () {
if ($(this).hasClass('layui-disabled')) {
return;
}
refreshCheckBox();
});
$('.layui-laypage-limits select').unbind('change').bind('change', function () {
refreshCheckBox();
});
setTimeout(function () {
$('.layui-table-cell').attr('title', function () {//单元格鼠标放上去显示单元中文字内容
return this.innerText;
})
});
}
table.on('checkbox(MyTable)', function (obj) {
if (obj.checked == true) {
if (obj.type == 'one') {
ids.push(obj.data.nodecode);
} else {
ids = currentData.map(function (value) {
return value.nodecode;
});
}
} else {
if (obj.type == 'one') {
let i = ids.length;
while (i--) {
if (ids[i] == obj.data.nodecode) {
ids.splice(i, 1);
}
}
} else {
ids = [];
}
}
refreshCheckBox();
});
var refreshCheckBox = function () {
var c = $('.layui-table-header th[data-field="0"] input[type="checkbox"]');
if (ids.length == currentData.length && currentData.length && currentData.length > 0) {
c.prop('checked', true);
} else {
c.prop('checked', false);
}
form.render('checkbox'); //刷新checkbox选择框渲染
}