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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
Element Badge标记的使用方法
Jul 27 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php支付宝APP支付功能
2020/07/29 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Django实现跨域的2种方法
2019/07/31 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
销售顾问的岗位职责
2013/11/13 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server