700字范文 > layui分页获取数据回显checkbox

layui分页获取数据回显checkbox

时间：2023-10-12 10:20:25

一、实际开发场景中，需要勾选不同页面的数据,如下图，常规的是如果在某一页中勾选了数据，那么切换页面后，你之前勾选的数据就消失了，如果想记录之前的数据，并且可操作（勾选进数组，反勾选出数组）

二、定义数据（说文雅点设计数据结构）

var table_data = new Array();//存放初始化加载的10条数据（我的分页一页10条数据，既存放当前页的这几条数据）var ids = new Array();//用于存放目标记录的id数组

三、书写checkbox，监听checkbox

adapterCheckbox：function{

table.on('checkbox(training-list)', function (obj) {if (obj.checked == true) {if (obj.type == 'one') {//勾选单条ids.push(obj.data.id);}if (obj.type == 'all') {//勾选全部for (var i = 0; i < table_data.length; i++) {ids.push(table_data[i].id);//table_data 在步骤3中初始化请注意这块}}} else {if (obj.type == 'one') {for (var i = 0; i < ids.length; i++) {if (ids[i] == obj.data.id) {ids = ids.filter(function (item) {return item != ids[i];});}}} else {for (var i = 0; i < ids.length; i++) {for (var j = 0; j < table_data.length; j++) {if (ids[i] == table_data[j].id) {ids = ids.filter(function (item) {return item != ids[i];});}}}}}console.log(ids);});

}

四、初始化 table_data 设置checkbox的回显

table.render({ //------------------------------------------常规table渲染size: 'sm',//设置表头cols: [[{type: 'checkbox', fixed: 'left'},{field: 'name', title: '虚拟机名称'},{field: 'virtualImageTag', title: '镜像系统'},{field: 'virtualType', title: '平台类型'},{field: 'createTime', title: '创建时间'}]],url: 'virtualMachine/queryListPage',method: 'post',where: Page.whereAges,request: {pageName: "current", //页码的参数名称，默认：pagelimitName: 'size' //每页数据量的参数名，默认：limit},response: {statusCode: 200, //成功的状态码，默认：0msgName: 'message' //状态信息的字段名称，默认：msg},elem: '#training-list',page: {elem: 'pageDiv',limit: 10,limits: [10, 20, 30, 40, 50]},contentType: "application/json",done: function (res, curr, count) {//-----------------跟table的使用是一样的，只是在done做了一些操作table_data = res.data;//初始化数据;此处接收的是当前页的这10条数据if (ids.length > 0) {for (var i = 0; i < ids.length; i++) {for (var j = 0; j < table_data.length; j++) {if (ids[i] == table_data[j].id) {//匹配上就设为选中//回显checkbox$('.layui-table tr[data-index=' + j + '] input[type="checkbox"]').attr("checked", "checked");form.render('checkbox');}}}}//操作选中的行Page.adapterCheckbox();}});