bootstrap-table 切换页码保留勾选的checkbox
首先该方法除了需要引入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的更多相关文章
- element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...
- layui table 分页 记住之前勾选的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue ele table表格 设置只能勾选一个
table 更改属性设置: <el-table ref="multipleTable" :data="tableData" tooltip-effect= ...
- Jquery-获取勾选的checkbox的同级节点数量
// 获取勾选的标签值得上一个兄弟节点 var groups = []; $('input[name="group_name"]:checked').siblings(" ...
- element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...
- <c:forEach>循环列表,获取勾选的checkbox中某个<td>的值
<table> <!--列表表头 开始 --> <tr> <th><input type="checkbox" name=&q ...
- bootstrap table保留多选框的分页
有时候需要完成这种情况: 1.需要设置的是如果第一页点击复选框然后点击其他页面的话,第一页的选项被保存了 2.将所有选择好的复选款的数据保存在数组中 bootstrap table官方文档http:/ ...
- Bootstrap, 模态框实现值传递,自动勾选
目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: 有一个这样的需求, 在父页面有一个table, ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
随机推荐
- 矩阵二分快速幂优化dp动态规划
矩阵快速幂代码: int n; // 所有矩阵都是 n * n 的矩阵 struct matrix { int a[100][100]; }; matrix matrix_mul(matrix A, ...
- The DELETE statement conflicted with the REFERENCE constraint
Page是主表,主键是pageid:UserGroupPage表中的PageID字段是Page表里的数据. https://www.codeproject.com/Questions/677277/I ...
- 【打分策略】Elasticsearch打分策略详解与explain手把手计算
一.目的 一个搜索引擎使用的时候必定需要排序这个模块,一般情况下在不选择按照某一字段排序的情况下,都是按照打分的高低进行一个默认排序的,所以如果正式使用的话,必须对默认排序的打分策略有一个详细的了解才 ...
- ubuntu server 多网卡
https://wenku.baidu.com/view/51fb15742f60ddccdb38a007.html
- ubuntu 14.04 server(amd64) 安装ros indigo
1.添加软件源(添加了正确的软件源,操作系统就知道去哪里下载程序,并根据命令自动安装软件) sudo sh -c 'echo "deb http://packages.ros.org/ros ...
- TinyXml节点查找及修改
参考:http://blog.csdn.net/zww0815/article/details/8083550 // 读者对象:对TinyXml有一定了解的人.本文是对TinyXml工具的一些知识点的 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- android开发:Android 中自定义属性(attr.xml,TypedArray)的使用
今天我们的教程是根据前面一节扩展进行的,如果你没有看,请点击 Android高手进阶教程(三)查看第三课,这样跟容易方便你的理解! 在xml 文件里定义控件的属性,我们已经习惯了android:att ...
- Codeforces 101487E - Enter The Dragon
101487E - Enter The Dragon 思路:做的时候两个地方理解错了,第一个事我以为龙吸了水,水就干了,其实龙是在下雨之前吸的,下雨时湖水又满了,所以湖水永远不会干:第二个是以为只要找 ...
- 慕课网Hibernate初探之一对多映射实验及总结
慕课网Hibernate初探之一对多映射实验及总结 一.本课核心 * 1.如何在MyEclipse中使用Hibernate * 2.如何实现Hibernate中一对多的映射 * 3.如何创建Sessi ...