使用的 jquery版本为 2.1.1

在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections'); 只能拿到当前页的复选框。

js - 表格初始化

$(function(){

    $('#res_table').bootstrapTable({
url : '${path}/res/listData',
contentType : "application/x-www-form-urlencoded",
method : 'post',
sortable: true,
dataType : 'json',
toolbar : '#toolbar',
striped : true,
cache : false,
pagination : true,
sidePagination : "server", //服务端分页
pageNumber : 1,
pageSize : 10,
pageList : [ 10, 20, 30, 40 ], //可供选择的每页的行数(*)
strictSearch : true,
showColumns : true,
showRefresh : true,
minimumCountColumns : 2,
clickToSelect : true, //是否启用点击选中行
uniqueId : "ID",
showToggle : true,
cardView : false,
detailView : false, //是否显示父子表
maintainSelected : true,
columns :[
{
align : 'center',
checkbox: true, // 显示复选框
formatter: function (i,row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.id,Array.from(overAllIds))!=-1){ // 因为 Set是集合,需要先转换成数组
return {
checked : true // 存在则选中
}
}
}
},{
field : 'code',
align : 'left',
title : '资源编码'
},{
field : 'name',
align : 'left',
title : '资源名称'
},{
field : 'type',
align : 'left',
title : '资源类型',
}
]
});//表格结束

当表格选中或取消选中时

   $('#res_table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
examine(e.type,datas); // 保存到全局 Set() 里
});
//初始化结束 });

bootstrap table api 选中事件的 jquery 方法

js方法

var overAllIds = new Set();                // 全局保存选中行的对象

function examine(type,datas){            // 操作类型,选中的行
if(type.indexOf('uncheck')==-1){
$.each(datas,function(i,v){ // 如果是选中则添加选中行的 id
overAllIds.add(v.id);
});
}else{
$.each(datas,function(i,v){
overAllIds.delete(v.id); // 删除取消选中行的 id
});
}
}

如果是删除操作需要把 Set() 对象先转换为数组!

如果使用 Array()

<script type="text/javascript">
$(function(){ $('#res_table').bootstrapTable({
url:'${path}/role/resourceData',
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) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.id,overAllIds)!=-1){// 因为 判断数组里有没有这个 id
return {
checked : true // 存在则选中
}
}
}
},{
field : 'code',
align : 'left',
title : '资源编码',
sortable: true
},{
field : 'name',
align : 'left',
title : '资源名称',
},{
field : 'type',
align : 'left',
title : '资源类型',
}
]
}); $('#res_table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
examine(e.type,datas); // 保存到全局 Array() 里
}); });
var overAllIds = new Array(); //全局数组 function examine(type,datas){
if(type.indexOf('uncheck')==-1){
$.each(datas,function(i,v){
// 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加 
      overAllIds.indexOf(v.id) == -1 ? overAllIds.push(v.id) : -1;
    });
    }else{
$.each(datas,function(i,v){
overAllIds.splice(overAllIds.indexOf(v.id),1); //删除取消选中行
});
} //console.log(overAllIds);
} </script>

bootstrap table 复选框选中后,翻页不影响已选中的复选框的更多相关文章

  1. easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中

    DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...

  2. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  3. Bootstrap Table 中文文档(完整翻译版)

    表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格. classes data-classes String ...

  4. elementUI 列表里面含有多选框,当翻页的时候依然保持之前页多选不变

    el-table的type="selection"的使用 场景:el-table,type="selection"时,重新请求后,设置列表更新前的已勾选项 踩坑 ...

  5. 实现GridView翻页并且实现CheckBox选中功能的保持

    在GridView与数据库进行绑定后,由得到的数据记录可能有许多条,以至一个页面无法容纳,这时需要进行多页显. 要实现分页显现,只要使用分页类 "PagedDataSource" ...

  6. Webdriver控制翻页控件,并实现向前向后翻页功能,附上代码,仅供参考,其他类似日期控件的功能可以自己封装

    新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE模板页搭建

    AdminLTE 官网地址:https://adminlte.io/themes/AdminLTE/index2.html 首先去官网下载包下来,然后引入项目. 然后我们在web层添加区域Admin以 ...

  8. c#中RadioButtonList选中后不整体刷新页面保持选中状态

    c#中用asp的RadioButtonList控件总会遇到选中了,然后跟着就刷新整体页面,又变为没有选中状态. <%@ Page Language="C#" AutoEven ...

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

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

随机推荐

  1. Bootstrap《第一篇》,关于container、jumbotron、row、col、text-center等的学习

    一.关于引入bootstrap文件 <!-- 为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. --> <meta name= ...

  2. IOS设计模式-简单工厂

    为什么 “简单工厂原理” 叫简单工厂,因为这个工厂类不是抽象类,而是实体类,工厂本身就是一个具体的对象. 写一个例子演示简单工厂模式: >>>>>>>> ...

  3. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:2.搭建环境-2.7. 配置资源与参数

    2.7.配置资源与参数 2.7.1. 修改主机名称 [root@linuxrac1 ~]# cd /etc/sysconfig [root@linuxrac1 sysconfig]# vi netwo ...

  4. jquery冲突

    今天修改一个项目发现,前辈们自己写的一些方法和jquery冲突了,也就是$的冲突,以至于自己用jquery编写的新功能无法正常使用,细究后发现解决办法如下:使用 noConflict() 方法为 jQ ...

  5. node-mysql中的连接池代码学习

    node-mysql是一个node.js下的mysql驱动,前段时间在处理连接池的问题上遇到了连接不释放的疑难杂症,虽已解决,但仍需总结经验避免下次重蹈覆辙.下面是node-mysql中的连接池的部分 ...

  6. Chrome不支持NPAPI的信息与替代方案

    昨天Chrome稳定版更新到了42版,发现百度云.支付宝.网银等等的插件都失效了,打开 chrome://plugins/ 一看,NPAPI都消失了,只有flash的插件还在.解决办法是到 chrom ...

  7. 基于Tkinter利用python实现颜色空间转换程序

    主要基于colorsys实现,例子是从hls转换到rgb,假设要换颜色空间非常easy仅仅须要改动一个函数 用到了Scale和Canvas组件 代码例如以下: from Tkinter import ...

  8. 关联分析Apriori算法和FP-growth算法初探

    1. 关联分析是什么? Apriori和FP-growth算法是一种关联算法,属于无监督算法的一种,它们可以自动从数据中挖掘出潜在的关联关系.例如经典的啤酒与尿布的故事.下面我们用一个例子来切入本文对 ...

  9. ACM-ICPC 2018 徐州赛区网络预赛 J Maze Designer(最大生成树+LCA)

    https://nanti.jisuanke.com/t/31462 题意 一个N*M的矩形,每个格点到其邻近点的边有其权值,需要构建出一个迷宫,使得构建迷宫的边权之和最小,之后Q次查询,每次给出两点 ...

  10. html5 + thyleaf引擎

    偶然与巧合 舞动了蝶翼 谁的心头风起 前赴而后继 万千人追寻 荒漠唯一菩提 似擦肩相遇 或擦肩而去 命运犹如险棋 无数时间线 无数可能性 终于交织向你