官方演示地址：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. Protocol（协议）

    Protocol(协议) (一) (1)简介 1.Protocol:就一个用途,用来声明一大堆的方法(不能声明成员变量),不能写实现.看起来类似于一个类的接口, 不同的是协议没有父类,也不能定义实例变 ...

  2. bower——基本使用

    基本概念 bower可以解决项目的静态文件依赖的问题 bower是用nodejs开发的,所以要现状nodejs 安装nodejs应用程序,网上自行下载 检验是否成功安装,打开电脑cmd,执行node ...

  3. C# 面向对象之类和方法

    一.新建一个类,用来存放属性和方法( 属性和方法写在同一个类中). 先新建一个类: using System; using System.Collections.Generic; using Syst ...

  4. Spring与Struts2集成开发

    Struts2和Spring都是不错的开源框架,Spring与Struts2集成开发,把二者结合在一起使用,开发效果更佳,效率杠杠的.下面介绍一下如何将Spring与Struts2集成在一起开发.分七 ...

  5. npm换淘宝源 yarn换淘宝源

    查询初始的源 npm get registry > https://registry.npmjs.org/ 设置淘宝源 npm config set registry http://regist ...

  6. HDU_6016_(Bestcoder round #92 1002)_(dfs)(暴力)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6016 题意:给定男羊和女羊的朋友关系,即给定一个图,问从任意一只羊开始连续数四只不相同的羊的方法数. ...

  7. Flask框架 之abort、自定义错误、视图函数返回值与jsonify

    一.abort函数 使用abort函数可以立即终止视图函数的执行,并可以返回给前端特定的值. abort函数的作用: 1.传递状态码,必须是标准的http状态码 2.传递响应体信息 @app.rout ...

  8. java.lang.NoClassDefFoundError: org/hibernate/validator/internal/engine/DefaultClockProvider

    ①在springboot的spring-boot-starter-web默认引入了以下依赖: <dependency> <groupId>com.fasterxml.jacks ...

  9. vue-quill-editor + element-ui upload实现富文本图片上传

    代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...

  10. 基于APE物理引擎的管线容积率计算方法

    容积率一般应用在房地产开发中,是指用地范围内地上总建筑面积与项目总用地面积的比值,这个参数是衡量建设用地使用强度的一项非常重要的指标.在其他行业,容积率的计算也非常重要,如产品利用率.管道使用率等等. ...