layui 翻頁記住選擇

 

最終實現效果：

 

依賴官方有示例，就不寫了

 

HTML

<div class="layui-card-body">
    <table id="layuiTable" lay-filter="layuiTable"></table>
    <div id="loadLayPage"></div>
</div>

 

JS

layui.define(["table", 'layer', 'laypage'], function (e) {
    /**引入組件*/
    let table = layui.table
        , layer = layui.layer
        , layPage = layui.laypage
        , queryParam = {};


    /**加載表格 ...*/
    table.render({
        id: 'layuiTable',
        elem: '#layuiTable',
        height: "full-190",
        skin: 'line',
        url: '/system/users',
        where: queryParam,
        text: "無數據顯示",
        cols: [[
            {type: 'checkbox'},
            {field: "userCode", title: "用戶編號", hide: true},
            {field: "username", title: "用戶名", cellMinWidth: 235},
            {field: "name", title: "姓名", width: 85},
            {field: "mailAddress", title: "郵箱地址", width: 160},
            {field: "status", title: "狀態", width: 70},
            {field: "lastLoginIp", title: "最後登錄IP", width: 130},
            {field: "lastLoginTime", title: "最後登錄時間", width: 150},
            {field: "updatedTime", title: "修改時間", width: 150}
        ]],
        done: function (res, curr, count) {
            // 加載分頁 ...
            loadLayPage(res.count, res.data);
            // 選中回顯
            selectEcho(res.data, "userCode")
        }
    });

    function loadLayPage(count, limit) {
        layPage.render({
            elem: 'loadLayPage'
            , count: count
            , curr: queryParam.page || 1
            , limit: queryParam.limit || 10
            , limits: [10, 20, 30]
            , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip']
            , jump: function (obj, first) {
                queryParam.page = obj.curr;
                queryParam.limit = obj.limit;
                if (!first) {
                    reloadTable({
                        where: queryParam
                    });
                }
            }
        });
    }

    /**重新加載表格數據*/
    function reloadTable(option = {}) {
        table.reload("layuiTable", option);
    }


    var selectData = new Set();
    table.on('checkbox(layuiTable)', obj => {
        if(obj.checked) {
            if (obj.type === "all") {
                // 全選當前頁
                table.checkStatus('layuiTable').data.map(row => row['userCode']).forEach(item => selectData.add(item + ""));
            } else {
                // 選中
                selectData.add(obj.data['userCode'] + "")
            }
        } else {
            if (obj.type === "all") {
                // 取消全選當前頁
                table.cache["layuiTable"].map(row => row['userCode']).forEach(item => selectData.delete(item + ""));
            } else {
                // 取消選中
                selectData.delete(obj.data['userCode'] + "")
            }
        }
        $(".select-count").html(selectData.size);
    });

    function selectEcho(data, dataField){
        // 選中回顯
        let ids = [];
        $.each( $(`td[data-field='${dataField}'] div.layui-table-cell`), (index, domObj) => {
            if (selectData.has($(domObj).text())) {
                ids.push($(domObj).text());
                $(domObj).parent().prev().find(".layui-form-checkbox")
                    .addClass("layui-form-checked").prev().prop('checked', true);
            }
        });

        // 真正有效的勾選
        for (let i = 0; i < data.length; i++) {
            if (ids.indexOf(data[i][dataField] + "") > -1) {
                data[i]["LAY_CHECKED"]=true;
            }
        }

        // 回顯全選checkbox的選中狀態
        if(ids.length === Number.parseInt($(".layui-laypage-limits select").val())){
            $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
            $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
        }
    }

});