bootstrap table插件的分页与checkbox使用详解


Posted in Javascript onJuly 23, 2017

今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存

最终实现的功能如图:(图片来自网上)

bootstrap table插件的分页与checkbox使用详解

具体实现

首先,来看具体的代码,这里只截取实现功能所需代码

var selectionIds =[],selectionNames=[];
  var curd = {
    init:function(){
      this._getCheckParam();
    },

    /**
     * 初始化
     * @private
     */

  /**
   * 表格操作
   */
  //表格分页之前处理多选框数据
  _responseHandler:function()(res) {
    $.each(res.rows, function (i, row) {
      row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true
    });
    return res;
  },
    _list:function(){
      var _this = this
      var settings = {
        url:Path.searchUrl,
        method:'GET',
        responseHandler:_this.responseHandler, //在渲染页面数据     之前执行的方法
        height:Path.tbheight
      };
      bsTable.initTable("#boostrapTable",settings);
      // 其它的boostrapTable参数已经封装在bsTable里面了,这里就不贴出来了
    },
    /**
     * 获取选中ID
     * @returns {*}
     * @private
     */
    _getIdSelections:function() {
        // 用map进行过滤
        return $.map($('#bootstrapTable').bootstrapTable('getSelections'), function (row) {
          return row.id
        });
      },
    /**
     * 获取选中对象并显示
     * @private
     */
    _getCheckParam:function(){
      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};
      var $table=$('#bootstrapTable');
      //绑定选中事件、取消事件、全部选中、全部取消
      $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;
        });
        var names = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
          return row.name;
        });
        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        selectionIds = _[func](selectionIds, ids);
        selectionNames =_[func](selectionNames,names);
      });
    }
  };
      return curd;

});

比较常用的技巧

使用boostrapTable时候,选择表格的行,返回的rows有很多,这时候需要过滤出我们需要的字段,可以用

function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
      // 想返回什么字段就换成什么
    });
  }

当然,如果需要对选出的数据有限制筛选,用filter过滤也不错

var arr = [1,2,3,4,5,4,3,2,1];
var filterResult = arr.filter(function(item,index,array){
  return (item>2);
});
console.log(filterResult);  
//[3,4,5,4,3],返回所有数值都大于2的一个数组

相关讨论

如果想了解更多细节,可以看看GitHub上的issue

如何保存用户的复选框问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
小程序tab页无法传递参数的方法
Aug 03 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 #Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 #Javascript
js实现带进度条提示的多视频上传功能
Dec 13 #Javascript
基于javaScript的this指向总结
Jul 22 #Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
基于LayUI实现前端分页功能的方法
Jul 22 #Javascript
浅谈原型对象的常用开发模式
Jul 22 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php实现天干地支计算器示例
2014/03/14 PHP
四个PHP非常实用的功能
2015/09/29 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
图片自动更新(说明)
2006/10/02 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
几道PHP的面试题
2012/05/19 面试题
团队经理竞聘书
2014/03/31 职场文书
安全月活动总结
2014/05/05 职场文书
主题实践活动总结
2014/05/08 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
保险内勤岗位职责
2015/04/13 职场文书
实习指导老师意见
2015/06/04 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
django中websocket的具体使用
2022/01/22 Python