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);
        }
        });
    },
    

     

  • 相关阅读:
    如何用CSS实现中间自适应,两边定宽三栏布局
    [转]通过Spring Boot三分钟创建Spring Web项目
    [转]Java Web笔记:搭建环境和项目配置(MyEclipse 2014 + Maven + Tomcat)
    [转]单元测试、集成测试、确认测试、系统测试、验收测试
    [转]maven全局配置文件settings.xml详解
    [转]解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
    [转]PO BO VO DTO POJO DAO概念及其作用(附转换图)
    [转]如何提升你的能力?给年轻程序员的几条建议
    从oracle导出数据成csv,将csv导入mongodb问题
    Windows下Mongodb启动问题
  • 原文地址:https://www.cnblogs.com/GainLoss/p/7134388.html
Copyright © 2011-2022 走看看