bootstrap table 複選框選中後，翻頁以後保留先前選中數據

最近作項目，發現使用bootstrap table插件時，若是有複選框選擇功能，翻頁操做會致使上一頁選中的丟失，而api中的 bootstrapTable('getSelections'); 只能拿到當前頁的複選框，若是要實現翻頁以後保留先前選中數據，須要作下面邏輯處理

 

    var checkedIds = [] //存放選中的id 
    var checkedNames= [] //存放選中的須要的其餘信息，若是隻須要id,能夠不用這個字段 
    $(function() { 
        $('#bootstrap-table').bootstrapTable({ 
            url:'', 
            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) { 
                         //判斷當前id是否在存放選中id的數組中 
                        if($.inArray(row.id,checkedIds )!=-1){ 
                            return { 
                                 checked : true //若是存在，設置選中 
                            } 
                         }
                    }
                },
                { 
                    field : 'name', 
                    title : '名稱', 
                }, 
            ]
        });
        $('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows,pageData){ 
            let datas = $.isArray(rows) ? rows : [rows]; // 點擊時獲取選中的行或取消選中的行 
            //這裏有個特殊狀況，當有全選功能時，若是全選而後取消獲得的rows值爲空數組，因此此時取值取pageData 
            //經過e.type的值判斷是否點擊的是全選按鈕 
            e.type == 'uncheck-all' ? filterData(e.type,allData) : filterData(e.type,datas) 
        }); 
    }); 

/* 按要求對數據進行過濾，將選中的數據保存 */ 
    function filterData(type,datas){ 
        if(type == 'uncheck-all'){  //當全選取消選中項的時候，獲取到當前頁全部數據， 
        
            $.each(datas,function(i,v){ 
                if(v['0']==true){//若是爲true說明是選中 
                    checkedIds.indexOf(v.id) == -1 ? checkedIds.push(v.id) : -1; 
                    checkedNames.indexOf(v.name) == -1 ? checkedNames.push(v.name) : -1;
                }else{//說明是未選中 
                    checkedIds.splice(checkedIds.indexOf(v.id),1); //刪除取消選中行 
                    checkedNames.splice(checkedNames.indexOf(v.name),1); 
                } 
            }); 
            return 
        } 
        if(type.indexOf('uncheck')==-1){ 
            $.each(datas,function(i,v){ // 添加時，判斷一行或多行的 id 是否已經在數組裏 不存則添加　 
                checkedIds.indexOf(v.id) == -1 ? checkedIds.push(v.id) : -1; 
                checkedNames.indexOf(v.name) == -1 ? checkedNames.push(v.name) : -1; 
            }); 
        }else{ 
            $.each(datas,function(i,v){ 
                checkedIds.splice(checkedIds.indexOf(v.id),1);//刪除取消選中行 
                checkedNames.splice(checkedNames.indexOf(v.name),1); 
            }); 
        } 
    } 

PS：以上js代碼能夠實現當前頁選中以後，即便翻頁也會保存上一頁選中的數據，翻頁以後回到上一頁也會回顯到表格上去！

        若是是編輯頁面，一進入就須要表格回顯數據，須要先將checkedIds賦值，可是有時候表格仍是沒有回顯，須要檢查id的字段類型，若是一個是Number類型一個是string類型，須要相互轉換一下