bootstrap table 多选框分页保留示例代码


Posted in Javascript onMarch 08, 2017

在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据。

解决思路:

在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择。当然当取消选择的时候也要去删除数组中相应的数据。

为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin 也编写了相应的例子来演示,想看原问题的点击打开链接。

想直接看示例的点击打开链接

原示例是使用html方式来实现的表格,并使用服务端分页。并且相关js方法并不完善,我也踩了很多坑,所以本博客在原作者编写的示例的基础上,做了相关更改,在此展示和说明:

bootstrap table 多选框分页保留示例代码

var $table; 
var selectionIds = []; //保存选中ids 
$(function () { 
 $table = $("#example1").bootstrapTable({ 
 contentType:"application/x-www-form-urlencoded; charset=UTF-8", //初始化编码 
 url:'<%=basePath%>/order/queryOrderList', 
 method: 'post', 
 striped:true,  //奇偶行渐色表 
 pagination:true, //显示分页 
 clickToSelect:true, //是否选中 
 maintainSelected:true, 
 sidePagination: "server", //服务端分页 
 idField:"id", 
 pageSize: 10, 
 responseHandler:responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!! 
 columns: [ 
  {field: 'checkStatus',checkbox: true}, //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!! 
  {field: 'id',visible:false}, 
  {field: 'orderNumber',title: "订单编号",align:'center',width:'10%'} 
 ] 
 }); 
 //选中事件操作数组 
 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); 
   if(index!=-1){ 
   array.splice(index, 1); 
   } 
  }); 
  return array; 
 }; 
 var _ = {"union":union,"difference":difference}; 
 //绑定选中事件、取消事件、全部选中、全部取消 
 $table.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.id; 
  }); 
  func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; 
  selectionIds = _[func](selectionIds, ids); 
 }); 
}); 
 //表格分页之前处理多选框数据 
 function responseHandler(res) { 
  $.each(res.rows, function (i, row) { 
  row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true 
  }); 
  return res; 
 }

 原示例中并没有给出union和difference方法,是我自己按着思路实现的。开始并没有实现此功能,后来发现要给checkbox字段加上一个filed字段,并与responseHandler方法中更改的row字段一致,才能实现功能。

以上所述是小编给大家介绍的bootstrap table 多选框分页保留示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 #Javascript
footer定位页面底部(代码分享)
Mar 07 #Javascript
vue父子组件的数据传递示例
Mar 07 #Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
You might like
文件上传类
2006/10/09 PHP
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
python opencv实现图像配准与比较
2021/02/09 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
同学会邀请书大全
2014/01/12 职场文书
保安岗位职责
2014/02/21 职场文书
社区平安建设方案
2014/05/25 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
python中 .npy文件的读写操作实例
2022/04/14 Python