bootstrap table保留多選框的分頁


有時候需要完成這種情況:

1.需要設置的是如果第一頁點擊復選框然后點擊其他頁面的話,第一頁的選項被保存了

2.將所有選擇好的復選款的數據保存在數組中

bootstrap table官方文檔http://bootstrap-table.wenzhixin.net.cn/在寫之前這個最好看一下

中心思想是:設置兩個變量保存選中的數據和對應數據的id,在每次點擊分頁或者選擇復選框的時候都需要根據選擇保存到數據中

initialize : function(options) {
this.selections=[];
this.selectionIds=[];//設置一下全局變量,這個表示的是獲取每行被選中的id數組
},

render : function() {
var _this = this;
// 創建table節點
this.$table = $("<table>");
this.$el.html(this.$table);
              //注意這里
function responseHandler(res) {
        $.each(res.rows, function (i, row) {  
                row.checkStatus = $.inArray(row.id, this.selectionIds) != -1;  //判斷當前行的數據id是否存在與選中的數組,存在則將多選框狀態變為true  
            });  
            return res;  
};
// 初始化表格
this.$table.bootstrapTable({
    locale : 'zh-CN',
    pagination : true,
    // 默認表格數據排序字段
    sortName : "",
    sortOrder : "",
    idField:"id",//這里設置以下表示id的變量
    pageNumber : _this.tableNum,//這是第幾頁
    pageSize : 10,
    pageList : [],
    sidePagination : 'server',
    maintainSelected:true,
    ajax : $request,
    url : $request.api + "/patents/query?",
    queryParams : function(params) {
        params["columns"] = "xxx";
        // 是否有附加參數
        if ($.isFunction(_this.getQueryParams)) {
            params = $.extend(params, _this.getQueryParams());
        }
        return params;
    },
    clickToSelect : true,
    responseHandler : responseHandler,
    columns : [{
        field: 'checkStatus',checkbox: true, //給復選框添加一個屬性
    }, {field: 'id',visible:false}, 
    {
        title : '序號',
        formatter : function(value, row, index) {
            return index + 1;
        }
    },
    }]
});
//通過全部選中數據進行元素獲取
this.showCheck();
//獲取到全部選中的數據
this.clickget()
return this;
},
clickget:function(){
    var mark;
    var _this=this;
    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);  
                    mark=index;
                    if(index!=-1){  
                        array.splice(index, 1);  
                    }  
                });  
    return array;  
    };
    var unions = function(arrays,rowa){  
        $.each(rowa, function (i, row) {  
            if($.inArray(row,arrays)==-1){  
                arrays[arrays.length] = row;  
            }  
        });  
        return arrays;  
    };
    var differences = function(arrays,rowa){  
    $.each(rowa, function (i, row) {  
                    
                    if(mark!=-1){  
                        arrays.splice(mark, 1);  
                    }  
                });
    
    return arrays;  
    };
    //綁定選中事件、取消事件、全部選中、全部取消  
    this.$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
    var _ = {"union":union,"difference":difference}; 
    var aa= {"unions":unions,"differences":differences};
            var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {  
                    return row.id;  
            }); 
            var rowa= $.map(!$.isArray(rows) ? [rows] : rows, function (row) {  
                    return row
            }); 
            func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
            funcs = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'unions' : 'differences';
            _this.selectionIds = _[func](_this.selectionIds, ids);  
            _this.selection = aa[funcs](_this.selections, rowa);  
            
    })  
},
showCheck:function(){//當分頁點擊的時候顯示之前的選擇
    var _this=this;
    this.$(".bootstrap-table").on('post-body.bs.table', function () {
    for(var i=0;i<_this.selectionIds.length;i++){
        _this.$("input[value="+_this.selectionIds[i]+"]").attr("checked",true);
    }
    });
},

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM