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 相关文章推荐
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 时间日期操作实战
2011/08/26 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python如何调用字典的key
2020/05/25 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
python新手学习可变和不可变对象
2020/06/11 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
运动会入场词100字
2014/02/06 职场文书
销售内勤岗位职责
2014/04/15 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
产品发布会策划方案
2014/05/12 职场文书
领导班子整改措施
2014/10/24 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
个人催款函范文
2015/06/23 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
python数字类型和占位符详情
2022/03/13 Python
python 判断文件或文件夹是否存在
2022/03/18 Python