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第一天(Jquery学习笔记)
May 11 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
js实现开关灯效果
2020/03/30 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python hashlib模块加密过程解析
2019/11/05 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
.net笔试题
2014/03/03 面试题
优秀导游先进事迹材料
2014/01/25 职场文书
承诺书怎么写
2014/03/26 职场文书
员工工作表现评语
2014/04/26 职场文书
活动总结报告范文
2014/05/04 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android