bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了bootstrap table展开或关闭当前行数据的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>expandRow-collapseRow</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css" >
 <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css" >
 <link rel="stylesheet" href="../assets/examples.css" >
 <script src="../assets/jquery.min.js"></script>
 <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
 <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
 <script src="../ga.js"></script>
</head>
<body>
 <div class="container">
 <h1>expandRow-collapseRow</h1>
 <p></p>
 <div id="toolbar">
 <button id="button" class="btn btn-default">expandRow</button>
 <button id="button2" class="btn btn-default">collapseRow</button>
 </div>
 <table id="table"
 data-toggle="table"
 data-toolbar="#toolbar"
 data-height="460"
 data-detail-view="true"
 data-detail-formatter="detailFormatter"
 data-url="../json/data1.json">
 <thead>
 <tr>
 <th data-field="id">ID</th>
 <th data-field="name">Item Name</th>
 <th data-field="price">Item Price</th>
 </tr>
 </thead>
 </table>
 </div>
<script>
 var $table = $('#table'),
 $button = $('#button'),
 $button2 = $('#button2');

 $(function () {
 $button.click(function () {
 $table.bootstrapTable('expandRow', 1);
 });
 $button2.click(function () {
 $table.bootstrapTable('collapseRow', 1);
 });
 });

 function detailFormatter(index, row) {
 var html = [];
 $.each(row, function (key, value) {
 html.push('<p><b>' + key + ':</b> ' + value + '</p>');
 });
 return html.join('');
 }
</script>
</body>
</html>

官方演示地址

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

Javascript 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Vue实现一个图片懒加载插件
Mar 11 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
vue axios同步请求解决方案
Sep 29 #Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 #Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 #Javascript
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Django发送html邮件的方法
2015/05/26 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
详解Python3 基本数据类型
2019/04/19 Python
详解Django配置优化方法
2019/11/18 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
多媒体教室标语
2014/06/26 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
500字小学生检讨书
2015/02/19 职场文书
护理工作个人总结
2015/03/03 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
初中运动会前导词
2015/07/20 职场文书