官方演示地址：http://issues.wenzhixin.net.cn/bootstrap-table/methods/expandRow-collapseRow.html

<!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>

转自：http://www.cnblogs.com/huangdegen/articles/5479021.html

bootstrap-table方法之：expandRow-collapseRow，展开或关闭当前行数据的更多相关文章

  1. Bootstrap table方法，Bootstrap table事件，配置

    调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...

  2. BootStrap Table方法使用小结

    参考链接:https://www.cnblogs.com/Amaris-Lin/p/7797920.html

  3. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  4. 基于bootstrap table配置的二次封装

    准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...

  5. bootstrap table使用总结

    使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑.下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较 ...

  6. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  7. 记Bootstrap Table两种渲染方式

    这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式 工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...

  8. bootstrap Table API和一些简单使用方法

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回”rows”.“”total,这样才能重新赋值 ...

  9. bootstrap table 和 x-editable 使用方法

    最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

随机推荐

  1. 1619. [HEOI2012]采花

    1619. [HEOI2012]采花 ★★☆   输入文件:1flower.in   输出文件:1flower.out   简单对比 时间限制:5 s   内存限制:128 MB [题目描述] 萧薰儿 ...

  2. python __slots__ 详解（上篇）

    转自:http://blog.csdn.net/sxingming/article/details/52892640 python中的new-style class要求继承Python中的一个内建类型 ...

  3. 业余开发Android App的架构演变

    闲暇之余,开发了一款休闲类app,虽然用户量不多,但确实花了不少心血在这上面.然而,开发出来的结果,与之前想好的架构,还是有不少区别. 下面,记录下这款app架构的演变: 最初,只想写个app,能与机 ...

  4. HTML 5 <aside> 标签

    定义和用法 <aside> 标签定义 article 以外的内容.aside 的内容应该与 article 的内容相关. 实例 <p>Me and my family visi ...

  5. (转）Hibernate框架基础——多对多关联关系映射

    http://blog.csdn.net/yerenyuan_pku/article/details/52756536 多对多关联关系映射 多对多的实体关系模型也是很常见的,比如学生和课程的关系.一个 ...

  6. 在做导入一个excel文件的时候,数据有空值的时候

    StringUtil.isNotEmpty(i.getFname()),用这个方法可以解决 java string 去除前后两端的空格和空字符使用.trim()

  7. linux shell学习笔记二---自定义函数(定义、返回值、变量作用域)介绍

    linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...

  8. Python网络编程—socket(二)

    http://www.cnblogs.com/phennry/p/5645369.html 接着上篇博客我们继续介绍socket网络编程,今天主要介绍的内容:IO多路复用.多线程.补充知识点. 一.I ...

  9. visioStudio常见问题

    问题一: 在做项目时候,使用VisioStudio 2008,一不小心将设置恢复到了原始,一直找不到需要的东西. 比如生成方式“debug”和“Release”选择框没有.一些图标也没有. 经过不断的 ...

  10. mySQL and sqoop for ubuntu

    数据的导入导出 ——MySQL & sqoop in Ubuntu 1.完成搭建hadoop集群 2.安装MySQL sudo apt-get install mysql-server mys ...