layui _____table分页后记录选中状态

标签：item   工具   one   ota   取消   用户   layer   列表   创建表格   

1、页面

<div class="list1">
<table class="layui-table" id="dataList" lay-skin="line" lay-size="lg" lay-filter="dataTable"></table>
</div>

2、创建表格

<scripttype="text/javascript">

var userDatas = [];
let pagedata = ""; //当前页面数据

var dataArr = []; //选中的数据

var tableOptions = {

elem: ‘#dataList‘,
toolbar: ‘#toolbarDemo‘, //开启头部工具栏，并为其绑定左侧模板
page: true, //开启分页
limits: [5, 10],
limit: 10, //每页数量
size: ‘sm‘,
cols: [
[{
checkbox: true
}, {
field: ‘ddd‘,
title: ‘用户姓名‘
}, {
field: ‘ccc‘,
title: ‘邮箱‘
}, {
field: ‘bbb‘,
title: ‘电话‘
}, {
field: ‘aaa‘,
title: ‘部门名称‘
}]
],
url: “你请求的弟子”, //请求地址
where: {
aa: aaa,
bbb: bbb
}, //请求参数
//数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式
parseData: function(res) { //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.totalSize, //解析数据长度
"data": res.data.data //解析数据列表
};
},
request: {
pageName: ‘pageIndex‘, //页码的参数名称，默认：page
limitName: ‘pageSize‘ //每页数据量的参数名，默认：limit
},
done: function(res, curr, count) {
pagedata = res.data;
var chooseNum = 0; //记录当前页选中的数据行数
$.each(pagedata,function(index,item){
$.each(dataArr,function(idenx1,item1){
if(item.userId == item1.userId){
console.log(item)
res.data[index]["LAY_CHECKED"] = ‘true‘;
var Key = res.data[index][‘LAY_TABLE_INDEX‘];
$(".laytable-cell-checkbox").eq(index+1).find(‘input[type="checkbox"]‘).prop(‘checked‘, true);//获取当前的相同的class，然后在找到下标+1就是真正的数据下标。
chooseNum++;
}
});
});
if(pagedata.length == chooseNum){//判断当回调的数据长度和数据行数
$(".laytable-cell-checkbox").eq(0).find(‘input[type="checkbox"]‘).prop(‘checked‘, true);//就可以全选
}
form.render(‘checkbox‘);//回调成功一点要记住重新渲染表单
layer.close(loadingIndex);
}
};

layui.use([‘table‘, ‘layer‘, ‘form‘, ‘util‘], function() {
var layer = layui.layer,
table = layui.table;
form = layui.form;
util = layui.util; });

//创建表格
table.render(tableOptions);

//表格监听

table.on(‘checkbox(dataTable)‘, function(obj) {
let checked = obj.checked; //当前选择的状态，是否选中
if (obj.type == ‘all‘) { //全选
if (checked) {
dataArr.forEach((item, index) => {
pagedata.forEach(item1 => {
if (dataArr.id == item1.id) {
dataArr.splice(index, 1);
}
});
});
pagedata.forEach(item => { //全部选中，直接向dataArr push当前选中的数据
dataArr.push(item)
});

console.log(dataArr);
} else {
dataArr.forEach((item, index) => {
pagedata.forEach(item1 => {
if (dataArr.id == item1.id) {
dataArr.splice(index, 1);
}
})
})

console.log(dataArr);
}
} else { //单选
if (checked) {
dataArr.push(obj.data); //选中，直接向ids push当前选中的数据
console.log(dataArr);
} else {
dataArr.map((item, index) => { //取消选择，循环判断是否相等，相等就删除
if (obj.data.id == item.id) {
dataArr.splice(index, 1)
}
})
console.log(dataArr);
}
}
});

</script>

layui _____table分页后记录选中状态

标签：item   工具   one   ota   取消   用户   layer   列表   创建表格   

原文地址：https://www.cnblogs.com/summerOnlyOne/p/13443438.html