zoukankan      html  css  js  c++  java
  • 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);
        }
        });
    },
    

     

  • 相关阅读:
    基于Metaweblog API 接口一键发布到国内外主流博客平台
    uva144 Student Grants
    Uva 10452
    Uva 439 Knight Moves
    Uva 352 The Seasonal War
    switch语句
    java——基础知识
    我的lua学习2
    codeforces 431 D. Random Task 组合数学
    codeforces 285 D. Permutation Sum 状压 dfs打表
  • 原文地址:https://www.cnblogs.com/GainLoss/p/7134388.html
Copyright © 2011-2022 走看看