layui分頁獲取數據，回顯checkbox

實際開發場景中，需要勾選不同 頁面的數據,如下圖，常規的是如果在某一頁中勾選了數據，那么切換頁面后，你之前勾選的數據就消失了，如果想記錄之前的數據，並且可操作（勾選進數組，反勾選出數組）

1.定義數據（說文雅點設計數據結構）

var table_data = new Array();//存放初始化加載的10條數據（我的分頁一頁10條數據，既存放當前頁的這幾條數據）
var ids = new Array();//用於存放目標記錄的id數組

2.書寫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);
});

}

3.初始化 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();
    }
});