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

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

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

test_id为表的id

$("#test_id").bootstrapTable({//还是稍微介绍一下吧，这些注释是额外的，要加钱//是否显示查找search: false,//是否分页pagination: false,//每页显示多少条数据，也就是要显示多少行pageSize: 15,//分页，选择不同数字会改变上面的pageSizepageList: [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 = $('#test_id').bootstrapTable('getData');for(var i = 0; i < allTableData.length; i++) {//如果此行中有玩家名字（此处默认名字不重复）与你想获取的相同，则跳出循环，indexTemp是你要的行索引if(allTableData[i] && allTableData[i].playerName == playerNameTemp) {indexTemp = i;break;}}console.log("玩家张小帅的数据在表的第" + (indexTemp + 1) + "行");});

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

其他相关：

BootstrapTable API 中文版
BootstrapTable实现定时刷新数据

Bootstrap Table 双击、单击行获取该行内容及获取全表的内容相关推荐

bootstrap table添加合计行
添加合计行首先为表格添加showFooter: true属性然后为列添加footerFormatter属性 var templateTableParams = {classes: "ta ...
table（单击行，把当行的单选按钮(radio)设为选中状态，并应用当前样式）
直接上代码 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEnco ...
SQL数据库不用SQL语句能显示全表的内容_MySQL DBA必读：万字归总表设计与SQL编写技巧...
作者介绍刘书浩,"移动云"DBA,负责"移动云"业务系统的数据库运维.标准化等工作:擅长MySQL技术领域,熟悉MySQL复制结构.Cluster架构及运维优 ...
SQL数据库不用SQL语句能显示全表的内容_100道MySQL数据库经典面试题解析
1. MySQL索引使用有哪些注意事项呢? 可以从三个维度回答这个问题:索引哪些情况会失效,索引不适合哪些场景,索引规则索引哪些情况会失效查询条件包含or,可能导致索引失效如何字段类型是字符串, ...
SQL数据库不用SQL语句能显示全表的内容_MySQL百万级数据库优化方案
一.百万级数据库优化方案 1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断 ...
SQL数据库不用SQL语句能显示全表的内容_2020别再说你了解数据库了，你搞清楚这些问题了吗？...
程序员中一直有一个段子广为流传:大不了我们"删库跑路" 由此可见作为一个程序员,不了解数据库怎么能行,那么数据库到底是个啥呢,作为一个Java工程师,平时和数据库打交道着实不少,所 ...
SQL数据库不用SQL语句能显示全表的内容_Sql性能优化看这一篇就够了
前言一个优秀开发的必备技能:性能优化,包括:JVM调优.缓存.Sql性能优化等.本文主要讲基于Mysql的sql性能优化. 知识储备首先我们需要了解执行一条查询SQL时Mysql的处理过程: 其 ...
SQL数据库不用SQL语句能显示全表的内容_详解mysql数据库sql优化技巧总结
概述关于SQL优化的教程很多,但是比较杂乱.所以抽空整理了一下,也写出来跟大家分享一下.以下主要针对MySQL数据库,Oracle数据库也可以参考. 优化技巧总结 1.建索引对查询进行优化,要尽量 ...
SQL数据库不用SQL语句能显示全表的内容_阿里巴巴数据库分库分表的实践
在2006年阿里巴巴B2B团队以开源方式研发了Cobar这一关系型数据的分布式处理系统.该系统在很大程度上解决了最初使用Oracle数据库因为存储数据变得越来越大带来的扩展性问题,并且为开发人员提供了 ...

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

Bootstrap Table 双击、单击行获取该行内容及获取全表的内容相关推荐

最新文章

热门文章