Layui Table 分頁時記住選中狀態

Js腳本

define(["jquery", "layui"], function ($, layui) {
    var table = layui.table;

    //記錄選中表格記錄編號
    var checkedMultiList = [];

    var tableCheckBoxMultiColumnUtil = {
        /*初始化分頁設置*/
        init: function (settings) {
            var param = {
                //表格id
                gridId: '',
                //表格lay-filter值
                filterId: '',
                //表格主鍵字段名
                fieldName: ''
            };
            $.extend(param, settings);

            //設置當前保存數據參數
            if (checkedMultiList[param.gridId] == null) {
                checkedMultiList[param.gridId] = [];
            }

            //監聽選中行
            table.on('checkbox(' + param.filterId + ')', function (obj) {
                var type = obj.type;
                var checked = obj.checked;

                //當前選中數據
                var checkRowData = [];
                //當前取消選中的數據
                var cacelCheckedRowData = [];

                //選中
                if (checked) {
                    checkRowData = table.checkStatus(param.gridId).data;
                }
                //取消選中
                else {
                    if (type == 'all') {
                        //當前頁數據
                        var currentPageData = table.cache[param.gridId];
                        //debugger;
                        cacelCheckedRowData = currentPageData;
                    }
                    else {
                        cacelCheckedRowData.push(obj.data);
                    }
                }
                //清除數據
                $.each(cacelCheckedRowData, function (index, item) {
                    var itemValue = item[param.fieldName];

                    checkedMultiList[param.gridId] = checkedMultiList[param.gridId].filter(function (fItem, fIndex) {
                        return fItem[param.fieldName] != itemValue;
                    })
                });

                //添加選中數據
                $.each(checkRowData, function (index, item) {
                    //debugger;
                    var itemValue = item[param.fieldName];
                    var objFilter = checkedMultiList[param.gridId].filter(function (fItem, fIndex) {
                        return fItem[param.fieldName] == itemValue;
                    });
                    if (objFilter == null || objFilter.length == 0) {
                        var rowObj = item;
                        checkedMultiList[param.gridId].push(rowObj);
                    }
                });
            });
        },
        //設置頁面默認選中（在表格加載完成之后調用）
        checkedDefault: function (settings) {
            var param = {
                //表格id
                gridId: '',
                //表格主鍵字段名
                fieldName: ''
            };

            $.extend(param, settings);

            //當前頁數據
            var currentPageData = table.cache[param.gridId];
            if (checkedMultiList[param.gridId] != null && checkedMultiList[param.gridId].length > 0) {
                $.each(currentPageData, function (index, item) {
                    var itemValue = item[param.fieldName];

                    var objFilter = checkedMultiList[param.gridId].filter(function (filterItem, filterIndex) {
                        return filterItem[param.fieldName] == itemValue;
                    });
                    if (objFilter != null && objFilter.length > 0) {
                        //設置選中狀態
                        item.LAY_CHECKED = true;

                        var rowIndex = item['LAY_TABLE_INDEX'];
                        updateRowCheckStatus(param.gridId, 'tr[data-index=' + rowIndex + '] input[type="checkbox"]');
                    }
                });
            }
            //判斷當前頁是否全選
            var currentPageCheckedAll = table.checkStatus(param.gridId).isAll;
            if (currentPageCheckedAll) {
                updateRowCheckStatus(param.gridId, 'thead tr input[type="checkbox"]');
            }
        },
        //獲取當前獲取的所有集合值
        getValue: function (settings) {
            var param = {
                //表格id
                gridId: ''
            };
            $.extend(param, settings);

            return checkedMultiList[param.gridId];
        },
        //設置選中的id（一般在編輯時候調用初始化選中值）
        setIds: function (settings) {
            var param = {
                gridId: '',
                //數據集合
                ids: []
            };
            $.extend(param, settings);

            checkedMultiList[param.gridId] = [];
            $.each(param.ids, function (index, item) {
                checkedMultiList[param.gridId].push(parseInt(item));
            });
        }
    };

    function updateRowCheckStatus(gridId, ele) {
        var layTableView = $('.layui-table-view');
        //一個頁面多個表格，這里防止更新表格錯誤
        $.each(layTableView, function (index, item) {
            if ($(item).attr('lay-id') == gridId) {
                $(item).find(ele).prop('checked', true);
                $(item).find(ele).next().addClass('layui-form-checked');
            }
        });
    }

    return tableCheckBoxMultiColumnUtil;
});

Js調用

(function () {
    require(["jquery", "layui", "savecheckstatus"], function ($, layui, SaveCheckStatus) {
        //車輛結果表格
        var layuiTable;

        $(function () {
            //1.初始化分頁設置
            SaveCheckStatus.init({
                gridId: 'i_Layer_SearchResult_Table',
                filterId: 'i_Layer_SearchResult_Table_Filter',
                fieldName: 'id'
            });
                
            loadSearchCarTable();
            btnEvent();
        });

        function loadSearchCarTable() {
            //加載搜索車輛結果表格
            layuiTable = layui.table.render({
                elem: '#i_Layer_SearchResult_Table',
                id: "i_Layer_SearchResult_Table",
                url: URL.paginationTable,  //數據接口
                method: "post",
                page: true, //開啟分頁
                limit: 10,
                limits: [5, 10, 20],
                cols: []
                done: function () {
                    //2.初始化表格行選中狀態
                    SaveCheckStatus.checkedDefault({
                        gridId: 'i_Layer_SearchResult_Table',
                        fieldName: 'id'
                    });
                }
            });
        }

        //按鈕事件
        function btnEvent() {
            //獲取選擇結果按鈕
            $("#btn").on("click", function () {
                //3.獲取選中編號
                var tableData = SaveCheckStatus.getValue({ gridId: 'i_Layer_SearchResult_Table' });
                console.log(tableData);
            });
        }
    });
})();

轉載自：https://blog.csdn.net/feter1992/article/details/85226329