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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
javascript 闭包详解
Feb 15 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
详解用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
php导出CSV抽象类实例
2014/09/24 PHP
linux中cd命令使用详解
2015/01/08 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python创建进程fork用法
2015/06/04 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Python加速程序运行的方法
2020/07/29 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
一套Java笔试题
2016/08/20 面试题
《分一分》教学反思
2014/04/13 职场文书
小学家长评语大全
2014/04/16 职场文书
承诺书模板
2014/08/30 职场文书
公司委托书范本5篇
2014/09/20 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
滞留工资返还协议书
2014/10/19 职场文书
导师对论文的学术评语
2015/01/04 职场文书
同事打架检讨书
2015/05/06 职场文书
签字仪式主持词
2015/07/03 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书