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

 更新时间:2017年03月08日 08:45:58   作者:Agger_chen  
在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据,怎么解决呢,下面小编给大家分享下解决思路

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

解决思路:

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

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

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

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

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 canvas实现环形渐变进度条

    JavaScript canvas实现环形渐变进度条

    这篇文章主要为大家详细介绍了JavaScript canvas实现环形渐变进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JS+CSS实现消息的点击展示和隐藏(H5端)

    JS+CSS实现消息的点击展示和隐藏(H5端)

    在 H5 端,我们经常需要实现类似于点击按钮来展示或隐藏消息的功能,以下是一个使用 CSS 和 JavaScript(配合 Vue.js)来实现这个效果的简单示例,需要的朋友可以参考下
    2023-10-10
  • 微信小程序用swiper实现滑动刻度尺

    微信小程序用swiper实现滑动刻度尺

    这篇文章主要为大家详细介绍了微信小程序用swiper实现滑动刻度尺,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 读JavaScript DOM编程艺术笔记

    读JavaScript DOM编程艺术笔记

    读JavaScript DOM编程艺术笔记,需要的朋友可以参考下。
    2011-11-11
  • 详解javascript遍历方式

    详解javascript遍历方式

    这篇文章主要介绍了详解javascript遍历方式,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序wx.request的简单封装

    微信小程序wx.request的简单封装

    这篇文章主要介绍了微信小程序wx.request的简单封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • javascript实现点击按钮变色

    javascript实现点击按钮变色

    这篇文章主要为大家详细介绍了javascript实现点击按钮变色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 用js实现键盘方向键翻页功能的代码

    用js实现键盘方向键翻页功能的代码

    用js实现键盘方向键翻页功能的代码...
    2007-06-06
  • javascript string字符串优化问题

    javascript string字符串优化问题

    今天看到一个很久的帖子说string连接优化问题。于是自己也测试一下。写了个很简单的代码
    2011-07-07
  • 详解如何在JavaScript中使用装饰器

    详解如何在JavaScript中使用装饰器

    Decorator装饰器是ES7的时候提案的特性,目前处于Stage 3候选阶段(2022年10月)。装饰器简单来说就是修改类和类方法的语法糖,很多面向对象语言都有装饰器这一特性。本文就来说说如何在JavaScript中使用装饰器,需要的可以参考一下
    2022-10-10

最新评论