热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstraptable多选框分页保留示例代码

在使用bootstraptable的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据,怎么解决呢,下面小编给大家分享下解决思路

在使用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) &#63; [rows] : rows, function (row) { 
   return row.id; 
  }); 
  func = $.inArray(e.type, ['check', 'check-all']) > -1 &#63; '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 多选框分页保留示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 探讨了小型企业在构建安全网络和软件时所面临的挑战和机遇。本文介绍了如何通过合理的方法和工具,确保小型企业能够有效提升其软件的安全性,从而保护客户数据并增强市场竞争力。 ... [详细]
  • 提升Tumblr爬虫效率与功能
    本文介绍了对之前开发的Tumblr爬虫脚本进行升级,整合了两个脚本的功能,实现了自动分页爬取博客内容,并支持配置文件以下载多个博客的不同格式文件。此外,还优化了图片下载逻辑。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 创建项目:Visual Studio Online 入门指南
    本文介绍如何使用微软的 Visual Studio Online(VSO)创建和管理开发项目。作为一款基于云计算的开发平台,VSO 提供了丰富的工具和服务,简化了项目的配置和部署流程。 ... [详细]
  • 开发笔记:2020 BJDCTF Re encode
    开发笔记:2020 BJDCTF Re encode ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 本文汇集了一系列具有强烈设计感的网站模板,特别是来自知名平台WrapBootstrap的响应式网站模板。这些模板不仅美观,而且功能强大,适合各种类型的网站建设需求。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • 树链问题的优化解法:深度优先搜索与质因数分解
    本文介绍了一种通过深度优先搜索(DFS)和质因数分解来解决最长树链问题的方法。我们通过枚举树链上的最大公约数(GCD),将所有节点按其质因子分类,并计算每个类别的最长链,最终求得全局最长链。 ... [详细]
author-avatar
心跳-很执着
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有