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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 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
也谈php网站在线人数统计
2008/04/09 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
react以create-react-app为基础创建项目
2018/03/14 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
什么是servlet
2012/05/08 面试题
策划主管的工作职责
2013/11/24 职场文书
九年级化学教学反思
2014/01/28 职场文书
企业年会主持词
2014/03/27 职场文书
活动总结报告怎么写
2014/07/03 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
单位领导婚礼致辞
2015/07/28 职场文书