首先该方法除了需要引入bootstrap库和bootstrap-table外,还需要引入一个工具库js:lodash.js    点我

使用时在jquery.min.js、bootstrap.min.js、bootstrap-table.js之后引入 lodash.js

html

<table id="dataShow"></table>

  

#定义一个数组:勾选的结果保留在selections数组中
var selections = [];
$(function () {
     # 注意:该函数定义在jquery初始化里面
$("#dataShow").on('check.bs.table check-all.bs.table ' +
'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
return row.managerInfoId;//注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId等
}),
func = $.inArray(e.type, ['check', 'check-all']) > - ? 'union' : 'difference';
selections = _[func](selections, ids);
});
}); function responseHandler(res) {
$.each(res.rows, function (i, row) {
# 注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 managerInfoId
# 注意这里的row.state中的state指的是表格中checkbox那一列定义的filed,替换成你使用的就行了比如 state等
          row.state = $.inArray(row.managerInfoId, selections) !== -;
});
return res;
}

主要代码就上面那些,以下是bootstrap-table初始化代码

var TableInit = function () {
var oTableInit = new Object();
oTableInit.Init = function () {
$("#dataShow").bootstrapTable({
url: "<%=path%>/oa/workTime/getManagerList",
method: 'post', //请求方式(*)
striped: true, //是否显示行间隔色
contentType: 'application/x-www-form-urlencoded',
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
maintainSelected: true,
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: , //初始化加载第一页,默认第一页,并记录
pageSize: , //每页的记录行数(*)
pageList: [, , , ], //可供选择的每页的行数(*)
queryParams: oTableInit.queryParams,
responseHandler: responseHandler, columns: [{
field: 'state',
checkbox: true
}, {
field: 'managerInfoId',
visible: false

我只是简略的贴了出来,注意标红处跟上面代码的关系

bootstrap-table api:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

bootstrap-table 切换页码保留勾选的checkbox的更多相关文章

  1. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  2. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue ele table表格 设置只能勾选一个

    table 更改属性设置: <el-table ref="multipleTable" :data="tableData" tooltip-effect= ...

  4. Jquery-获取勾选的checkbox的同级节点数量

    // 获取勾选的标签值得上一个兄弟节点 var groups = []; $('input[name="group_name"]:checked').siblings(" ...

  5. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

  6. <c:forEach>循环列表,获取勾选的checkbox中某个<td>的值

    <table> <!--列表表头 开始 --> <tr> <th><input type="checkbox" name=&q ...

  7. bootstrap table保留多选框的分页

    有时候需要完成这种情况: 1.需要设置的是如果第一页点击复选框然后点击其他页面的话,第一页的选项被保存了 2.将所有选择好的复选款的数据保存在数组中 bootstrap table官方文档http:/ ...

  8. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  9. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

随机推荐

  1. 浅谈java中死锁问题

    知识点:死锁的产生.死锁的实例 一:死锁的产生 我们在解决多线程共享资源的线程同步问题时,会使用synchronized关键字修饰方法或者通过Lock加锁方式修饰方法.代码块,防止多个线程访问统一资源 ...

  2. about MySQL Workbench的基本使用及运用操作

    http://blog.csdn.net/dongdong9223/article/details/48318877   <大神整理的更好!(评论里还有其他整理的) ↑ 使用MySQL Work ...

  3. C#学习笔记(十三):继承

    继承 object是引用类型 public:最高权限,公开的 Protected:外部不可以访问 Internal:类的默认访问是什么作用域 Private:类成员默认   基类实例:可以通过base ...

  4. FPGA 概述

    概述 verilog HDL Verilog HDL基本结构 1 Verilog HDL程序是由模块构成的.每个模块嵌套在module和endmodule声明语句中. 2 每个Verilog HDL源 ...

  5. 02_HBase集群部署

    HBase集群部署 HBase是分布式数据库,本身也需要借助zookeeper进行集群节点间的协调(Master, RegionServer), 可以使用HBase自带的zookeeper,也可以使用 ...

  6. 记一次诡异的bug

    使用django做项目,在视图函数中需要查询,查询前构造一个查询参数的模型来过滤参数防止报错,然后调用模型的方法返回一个字典,包括了所有查询的字段和值,发现只要查询过一次之后,后续的访问查询结果会在之 ...

  7. Codeforces Round #323 (Div. 2) C. GCD Table map

    题目链接:http://codeforces.com/contest/583/problem/C C. GCD Table time limit per test 2 seconds memory l ...

  8. python 时间元组转时间戳

    #!/usr/bin/python # -*- coding: UTF- -*- import time print(time.mktime((, , , , , , , , ))) 输出 15382 ...

  9. F4+2 团队项目软件设计方案

    目录 1引言 1.1编写目的 1.2背景 1.3定义 1.4参考资料 2总体设计 2.1需求规定 2.2运行环境 2.3基本设计概念和处理流程 2.4功能描述 2.5功能器求与程序的关系 2.6人工处 ...

  10. Java成神之路技术整理

    关于 Java 的技术干货,从以下几个方面汇总. Java 基础篇 Java 集合篇 Java 多线程篇 Java JVM篇 Java 进阶篇 Java 新特性篇 Java 工具篇 Java 书籍篇 ...