业务分析:
有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。
全局变量ck_Ids:
var ck_Ids=[];//存储的表格数据编号
done回调函数代码示例:
done: function (res, curr, count) {
//如果是异步请求数据方式,res即为你接口返回的信息。
$.each(res.data, function (index, row) {
var result = ck_Ids.some(function (item) {//判断编号是否存在
if (item == row['Id']) {
return true;
} else {
return false;
}
});
if (result) {
//这里才是真正实现的有效勾选
row["LAY_CHECKED"] = 'true';
//找到对应数据改变勾选样式,呈现出选中效果
var _index = row['LAY_TABLE_INDEX'];
$('tr[data-index=' + _index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + _index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
});
//设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
var checkStatus = table.checkStatus('test');
if (checkStatus.isAll) {
//设置表头的checkbox勾选样式
$('.layui-table-header th[data-field="Id"] input[type="checkbox"]').prop('checked', true);
$('.layui-table-header th[data-field="Id"] input[type="checkbox"]').next().addClass('layui-form-checked');
}
}
至此,业务需求完美解决!欢迎评论点赞。
不为模糊不清的未来担忧,只为清清楚楚的现在努力。