bootstrap-table翻頁時，保留多選框的選中狀態

使用bootstrap時，點擊分頁時會出現原先選擇的行已經不再被選擇，解決方法是：
定義一個全局變量，然后監控【選擇，全部選擇，取消選擇，全部取消選擇】事件，並對全局變量進行增刪改查，然后再設置【responseHandler】在渲染頁面數據之前執行方法，將數據保存！

var $table;
var selectionIds = [];    //保存選中ids
$(function () {
    let ctags = $('#ctag').val();
    let url = '{:url("lists")}?ctags='+ctags;
    $table = $('#suspects-grid').bootstrapTable({
        url: url,
        toolbar: "#suspects-toolbar",
        classes: "table table-hover",
        pagination: true,
        queryParams: function (params) {
            return {
                offset: params.offset,  //頁碼
                limit: params.limit,   //頁面大小
                order: params.order, //排序
                ordername: params.sort, //排序
                filter: params.filter,
            };
        },
        sidePagination: 'server',
        buttonsClass: "btn-sm btn btn-sm btn-default",
        striped: true,//cookie開啟
        cookie: true,//cookie的Name
        sortOrder: 'desc',
        cookieIdTable: 'suspectsCI',
        showRefresh: true,
        showColumns: true,
        clickToSelect: true,
        stickyHeader: true,
        stickyHeaderOffsetLeft:  $('#suspects-grid').offset().left + 'px',
        stickyHeaderOffsetRight: $('#suspects-grid').offset().right + 'px',
        filterControl: true,
        pageSize: 10,
        responseHandler:responseHandler, //在渲染頁面數據之前執行的方法，此配置很重要!!!!!!!
        columns: [{
            field: 'checkStatus',
            checkbox: true,
        }],
        pageList: [10, 20, 50, 100],
        onUncheckAll : function (rowsAfter,rowsBefore) {
            var ids = [];
            for (var i=0; i<rowsBefore.length; i++ ){
                ids.push(rowsBefore[i]["id"]);
            }

            $.each(ids, function (i, id) {
                var index = $.inArray(id,selectionIds);
                if(index!=-1){
                    selectionIds.splice(index, 1);
                }
            });
        },
    });


    

    //選中事件操作數組
    var union = function(array,ids){
        $.each(ids, function (i, id) {
            if($.inArray(id,array)==-1){
                array[array.length] = id;
            }
        });
        return array;
    };
    //取消選中事件操作數組
    var difference = function(array,ids){
        $.each(ids, function (i, id) {
            var index = $.inArray(id,array);
            if(index!=-1){
                array.splice(index, 1);
            }
        });
        return array;
    };
    var _ = {"union":union,"difference":difference};
    //綁定選中事件、取消事件、全部選中、全部取消
    // uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table
    $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
        var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
            return row.id;
        });
        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        selectionIds = _[func](selectionIds, ids);
    });

    //取消選中
    $(".filter-control input,.filter-control select").change(function(){
        // $('#contacts-grid').bootstrapTable("uncheckAll");
        selectionIds = [];
    });
});


    //表格分頁之前處理多選框數據
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.checkStatus = $.inArray(row.id, selectionIds) != -1;    //判斷當前行的數據id是否存在與選中的數組，存在則將多選框狀態變為true
        });
        return res;
    }

 

 

BootstrapTable的屬性一覽表

url: '/Home/GetDepartment',         //請求后台的URL（*）
method: 'get',                      //請求方式（*）
toolbar: '#toolbar',                //工具按鈕用哪個容器
striped: true,                      //是否顯示行間隔色
cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true,                   //是否顯示分頁（*）
sortable: false,                     //是否啟用排序
sortOrder: "asc",                   //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1,                       //初始化加載第一頁，默認第一頁
pageSize: 10,                       //每頁的記錄行數（*）
pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
search: true,                       //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true,                  //是否顯示所有的列
showRefresh: true,                  //是否顯示刷新按鈕
minimumCountColumns: 2,             //最少允許的列數
clickToSelect: true,                //是否啟用點擊選中行
height: 500,                        //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "ID",                     //每一行的唯一標識，一般為主鍵列
showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false,                    //是否顯示詳細視圖
detailView: false,                   //是否顯示父子表
columns: [{}]