官方演示地址：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. leetcode375 Guess Number Higher or Lower II

    思路: dp. https://leetcode.com/problems/guess-number-higher-or-lower-ii/discuss/ 实现: class Solution { ...

  2. sp_Msforeachtable与sp_Msforeachdb详解

      一.简要介绍: 系统存储过程sp_MSforeachtable和sp_MSforeachdb,是微软提供的两个不公开的存储过程.从mssql6.5开始,存放在SQL Server的MASTER数据 ...

  3. 类似倒圆角方法输入半径选择实体 kword

    ads_name ename; ads_point adspt; acedInitGet(NULL, TEXT("R")); while (1) { int rc = acedEn ...

  4. CAD把自定义实体，变成普通实体（com接口VB语言）

    主要用到函数说明: MxDrawXCustomEvent::MxDrawXCustomEntity::explode 把自定义实体,变成普通实体,详细说明如下: 参数 说明 LONGLONG lEnt ...

  5. Spring框架系列(四)--IOC控制反转和DI依赖注入

    背景: 如果对象的引用或者依赖关系的管理由具体对象完成,代码的耦合性就会很高,代码测试也变得困难.而IOC可以很好的解决这个问题,把这 些依赖关系交给框架或者IOC容器进行管理,简化了开发. IOC是 ...

  6. ajax aspx调用webservice，返回json

    1,创建一个asp.net网站 2.创建一个student类 using System; using System.Collections.Generic; using System.Linq; us ...

  7. Python pygame库的应用

    今天想用pygame库写一个击打外星人飞船的python程序 这个游戏的效果是操纵一个位于屏幕底端的飞船,通过上下左右控制飞船移动方向,按空格发射子弹.游戏中击杀一批飞船后进入下一关卡.每一关卡击打飞 ...

  8. 洛谷 2146 [NOI2015]软件包管理器

    [题解] 每个软件只依赖另一个软件,且依赖关系不构成环,那么很容易想到这是树形结构. 我们用1表示以安装,用0表示未安装或已卸载:那么安装一个软件,就是把它到树根的路径上所有的点都改为1:卸载一个软件 ...

  9. wannafly-day1 Problem A - Birthday

    思路:队友贪心WA了,然后就没有然后了,自己也是第一次接触最小费用流的题.借这个题来学习一下,利用Spfa每次来找到一个最短的路径同时保存路径,每一次寻找最短路径就将这条路的最小费用流给剪掉,然后继续 ...

  10. Spring核心技术（四）——Spring的依赖及其注入（续二）

    前面两篇文章描述了IoC容器中依赖的概念,包括依赖注入以及注入细节配置.本文将继续描述玩全部的依赖信息. 使用 depends-on 如果一个Bean是另一个Bean的依赖的话,通常来说这个Bean也 ...