Bootstrap Table 双击、单击行获取该行及全表内容


Posted in Javascript onAugust 31, 2018

什么是Bootstrap-table?

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的data-*属性标识设置,也可以使用Javascript方式进行设置,非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况,总结相关使用中碰到的问题处理经验。

Bootstrap Table 获取单击或双击的行内容

说明:看到这个应该就知道了bootstrap table的用法及如何使用了,所以下面的名称就不介绍了

•realTime_Table是表的id

$("#realTime_Table").bootstrapTable({
  //还是稍微介绍一下吧,这些注释是额外的,要加钱
  //是否显示查找
  search: false,
  //是否分页
  pagination: false,
  //每页显示多少条数据,也就是要显示多少行
  pageSize: 15,
  //分页,选择不同数字会改变上面的pageSize
  pageList: [5, 10, 15, 20],
  //显示列
  showColumns: true,
  //显示刷新按钮
  showRefresh: false,
  //是否可见
  showToggle: true,
  //默认英文,设置如下就是显示中文
  locale: "zh-CN",
  //显示时background-color白灰相间
  striped: true,
  /*
  *
  *
  *
  *
  *下面才是本文要介绍的,其他都是额外的,包括这句话
  *
  *
  *
  *
  */
  //=======================================================================================
  //双击触发的事件,当双击就会获取row,row就是该整行的内容,其中"row.playerName"中"playerName"是data-field定义的字段,(如果在js中定义,就是field定义的字段,)可以通过该方法获取该行所有列的值
  onDblClickRow: function (row) {
  console.log("click:" + row.playerName)
  }
  //=======================================================================================
  //如果想单击获取row,把onDblClickRow改为onClickRow,如下
  //onClickRow: function (row) {
  // console.log("click:" + row.playerName)
  // }
  //=======================================================================================
  //想获取全表的内容,只要用下面的方法,其中allTableData是个数组,整张表的内容,你可以使用遍历获取每行的内容,也可以使用索引直接获取你想要的那行的内容
  var indexTemp = 0;
  var playerNameTemp = '张小帅';
  var allTableData = $('#realTime_Table').bootstrapTable('getData');
  for(var i = 0; i < allTableData.length; i++) {
   indexTemp = i;
   //如果此行中有玩家名字(此处默认名字不重复)与你想获取的相同,则跳出循环,indexTemp是你要的行索引
   if(allTableData[i].playerName == playerNameTemp) {
    break;
   }
  }
  console.log("玩家张小帅的数据在表的第" + (indexTemp + 1) + "行");
 });

题外:关于表字段设置,可以查看:点击Bootstrap-table的右侧边栏Usage跳到最下面,有两种方法,一种是在声明表属性中设置,另一种是在js中设置

其他相关:

•BootstrapTable实现定时刷新数据: //3water.com/article/145535.htm

总结

以上所述是小编给大家介绍的Bootstrap Table 双击、单击行获取该行及全表内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
pjblog修改技巧汇总
Mar 12 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
Less 安装及基本用法
May 05 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
vue-router动态设置页面title的实例讲解
Aug 30 #Javascript
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
全面理解Python中self的用法
2016/06/04 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
采购部主管岗位职责
2014/01/01 职场文书
茶叶生产计划书
2014/01/10 职场文书
女方回门宴答谢词
2014/01/14 职场文书
招商专员岗位职责
2014/02/08 职场文书
财务简历的自我评价
2014/03/05 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Python IO文件管理的具体使用
2022/03/20 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers