layui分页获取数据，回显checkbox

最新推荐文章于 2024-09-10 00:00:00 发布

dongwn

最新推荐文章于 2024-09-10 00:00:00 发布

阅读量2.9k

点赞数 2

分类专栏： layui

本文链接：https://blog.csdn.net/m0_37615458/article/details/93727066

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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", //页码的参数名称，默认：page
        limitName: 'size' //每页数据量的参数名，默认：limit
    },
    response: {
        statusCode: 200, //成功的状态码，默认：0
        msgName: '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();
    }
});