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: [{}]