有时候需要完成这种情况:

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

bootstrap table保留多选框的分页的更多相关文章

  1. bootstrap table 保留翻页选中数据

    $(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...

  2. 前端 | vxe-table 翻页保留复选框状态

    0 前言 在前端开发过程中时常会遇到表格相关的显示与处理.组件库通常都会提供表格组件,对于展示.简单操作这些常用功能通常也够用:但如果需要更多的定制或进行比较复杂的操作,组件库自带的组件可能会捉襟见肘 ...

  3. BootStrap Table显示行号,并且分页后依然递增

    bootStrap table 此处使用的是V1.9.0.在网上百度的方法是: { title: '序号', field: '', formatter: function (value, row, i ...

  4. Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio

    Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问 ...

  5. layui的点击table行选中复选框

    $(document).on("click",".layui-table-body table.layui-table tbody tr",function() ...

  6. elementUITable的多选框:分页选择数据回显,分页保存选中的数据。

    <template> <el-table @selection-change="handleSelectionChange" :row-key="get ...

  7. bootstrap table 复选框选中后,翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  8. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  9. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

随机推荐

  1. RDS mysql 与ECS自建mysql做主从备份

    由于公司要组建一个数据中心,简而言之就是把各个地方的数据都同步到一个地方,做BI建模和数据分析. 一般来说这种需求是由hadoop来实现的,但由于预算不够..所以,来个low点的办法吧 以下主要是讲r ...

  2. H5 简介

    HTML5 - 新特性 HTML5 的一些最有趣的新特性: 新的语义元素,比如 <header>, <footer>, <article>, and <sec ...

  3. webpack@3.6.0(2) -- css及图片相关问题

    本篇内容 css3前缀处理postcss 消除未使用的css部分 图片处理 css分离和分离后的图片处理 css3前缀处理postcss cnpm i -D postcss-loader autopr ...

  4. 51nod1419 【数学】

    思路: n<=3,就是n. 考虑n>3: 我们可以轻松证明n,n-1这两个数互质: 设gcd(n,n-1)=g,n=g*k1,n-1=g*k2; n-(n-1)=g(k1-k2)=1; 所 ...

  5. 《OD学hadoop》20160903某旅游网项目实战

    一.大数据的落地点 1.数据出售 数据商城:以卖数据为公司的核心业务 2. 数据分析 百度统计 友盟 GA IBM analysis 3.搜索引擎 4. 推荐系统 mahout 百分比 5.精准营销 ...

  6. EOS多节点同步代码分析

    EOS version: 1.0.7 一. 配置文件的修改 EOS的节点同步流程是通过p2p来完成,在nodeos的配置文件config.ini中填写,其默认路径为~/.local/share/eos ...

  7. 1、gitlab的理论知识

    2.1 svn与git对比 . svn git 分布式 不是 是 在线阅读 不支持 不仅支持,而且可以在线编辑 存储方式 按文件 按元数据 完整性 一般 优 离线工作 日志都没法看 完全没问题 分支 ...

  8. Siverlight5 3D 中文环境搭建

    一.测试环境 vs2010旗舰版 win7 64位旗舰版 二.必备工具 1.vs2010 旗舰版 2.vs2010 sp1 补丁 3.silverlight5 tools 也可以去silverligh ...

  9. Abbreviation ---- hackerrank

    ---恢复内容开始--- https://www.hackerrank.com/contests/world-codesprint-6/challenges/abbr 给定两个串str和sub. 对于 ...

  10. Java面向对象_常用类库api——二叉树数据结构实现

    二叉树是每个节点最多有两个子树的有序树.通常子树被称为"左子树"和"右子树". 二叉树算法的排序规则: 1.选择第一个元素作为根节点 2.之后如果元素大于根节点 ...