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 相关文章推荐
jQuery DOM删除节点操作指南
Mar 03 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jquery实现pager控件示例
2014/04/09 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
javascript实现表单验证
2016/01/29 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
python 接口实现 供第三方调用的例子
2019/08/13 Python
python实现快递价格查询系统
2020/03/03 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
学校门卫管理制度
2014/01/30 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
学习保证书怎么写
2015/02/26 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python