bootstrap table 復選框選中后，翻頁不影響已選中的復選框

使用的 jquery版本為 2.1.1

在項目中發現bootstrap table的復選框選中后，翻頁操作會導致上一頁選中的丟失，api中的 bootstrapTable('getSelections'); 只能拿到當前頁的復選框。

js - 表格初始化 

$(function(){
    
    $('#res_table').bootstrapTable({
        url : '${path}/res/listData',
        contentType : "application/x-www-form-urlencoded",
        method : 'post', 
        sortable: true,                     
        dataType : 'json',
        toolbar : '#toolbar', 
        striped : true,
        cache : false, 
        pagination : true,
        sidePagination : "server", //服務端分頁
        pageNumber : 1,
        pageSize : 10, 
        pageList : [ 10, 20, 30, 40 ], //可供選擇的每頁的行數（*）
        strictSearch : true,
        showColumns : true, 
        showRefresh : true, 
        minimumCountColumns : 2, 
        clickToSelect : true, //是否啟用點擊選中行
        uniqueId : "ID", 
        showToggle : true, 
        cardView : false, 
        detailView : false, //是否顯示父子表
        maintainSelected : true,
        columns :[
        {
            align : 'center',
            checkbox: true,                          // 顯示復選框
            formatter: function (i,row) {            // 每次加載 checkbox 時判斷當前 row 的 id 是否已經存在全局 Set() 里
                if($.inArray(row.id,Array.from(overAllIds))!=-1){    // 因為 Set是集合,需要先轉換成數組  
                    return {
                        checked : true               // 存在則選中
                    }
                }
            }  
        },{ 
            field : 'code',
            align : 'left',
            title : '資源編碼'
        },{
            field : 'name',
            align : 'left',
            title : '資源名稱'
        },{
            field : 'type',
            align : 'left',
            title : '資源類型',
        }
        ]
    });//表格結束

當表格選中或取消選中時

   $('#res_table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
        var datas = $.isArray(rows) ? rows : [rows];        // 點擊時獲取選中的行或取消選中的行
        examine(e.type,datas);                                 // 保存到全局 Set() 里
   });

//初始化結束

});

bootstrap table api 選中事件的 jquery 方法

js方法

var overAllIds = new Set();                // 全局保存選中行的對象

function examine(type,datas){            // 操作類型，選中的行
    if(type.indexOf('uncheck')==-1){    
        $.each(datas,function(i,v){        // 如果是選中則添加選中行的 id
            overAllIds.add(v.id);
        });
    }else{
        $.each(datas,function(i,v){        
            overAllIds.delete(v.id);     // 刪除取消選中行的 id
        });
    }
}

如果是刪除操作需要把 Set() 對象先轉換為數組！

如果使用 Array()

<script type="text/javascript">
$(function(){
    
    $('#res_table').bootstrapTable({
        url:'${path}/role/resourceData',
        search : true,
        toolbar : '#toolbar',             //工具欄
        sortable: true,                      //開啟排序
        cache : false,
        striped : true,
        singleSelect : false,
        locale : 'zh-CN',
        sidePagination : "server",
        clickToSelect : true, //是否啟用點擊選中行
        pagination : true,
        maintainSelected : true,    //如果是客戶端分頁，這個設為 true 翻頁后已經選中的復選框不會丟失 
        pageSize : 10,
        pageNumber : 1,
        pageList: [10, 20, 30, 40],
        showRefresh : true, //是否顯示刷新按鈕
        
        columns :[
        {
            checkbox: true,                          // 顯示復選框
            formatter: function (i,row) {            // 每次加載 checkbox 時判斷當前 row 的 id 是否已經存在全局 Set() 里
                if($.inArray(row.id,overAllIds)!=-1){// 因為 判斷數組里有沒有這個 id 
                    return {
                        checked : true               // 存在則選中
                    }
                }
            }  
        },{ 
            field : 'code',
            align : 'left',
            title : '資源編碼',
            sortable: true
        },{
            field : 'name',
            align : 'left',
            title : '資源名稱',
        },{
            field : 'type',
            align : 'left',
            title : '資源類型',
        }
        ]
    });
    
    
    $('#res_table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
        var datas = $.isArray(rows) ? rows : [rows];        // 點擊時獲取選中的行或取消選中的行
        examine(e.type,datas);                              // 保存到全局 Array() 里
   });
    
    
});

var overAllIds = new Array();  //全局數組

function examine(type,datas){            
    if(type.indexOf('uncheck')==-1){    
        $.each(datas,function(i,v){
           // 添加時，判斷一行或多行的 id 是否已經在數組里 不存則添加　
　　　　　　overAllIds.indexOf(v.id) == -1 ? overAllIds.push(v.id) : -1;
　　　　});

 }else{ $.each(datas,function(i,v){ overAllIds.splice(overAllIds.indexOf(v.id),1); //刪除取消選中行  }); } //console.log(overAllIds); } </script>