官方演示地址：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. 后台管理进程GameMaster

    初步准备在后台加一个进程,用来控制进程中的各种数据,修改,查看,删除玩家数据类似于后端的gm控制平台

  2. python 模块-easygui.buttonbox

    2018-03-0315:43:11 ): Yes_or_No = easygui.buttonbox("是否良品?", choices=['Yes', 'No', '退出']) ...

  3. 继续C#开发or转做产品

    本人今年大四,C#开发,在一家公司实习了一年后,面临一个选择,是继续C#开发还是转做产品?我C#开发能力目前还一般,但很有兴趣.也喜欢设计与创意,做过产品专员.求大婶们指导!

  4. cideogniter部署到阿里云服务器出现session加载错误

    A PHP Error was encounteredSeverity: WarningMessage: mkdir() [function.mkdir]: Invalid argumentFilen ...

  5. github与git常用的一些基本配置与命令

    首次Git设置:ssh-keygen -t ras -C "email@xxx" 生成SSH (共钥)将生成的SSH key复制到文本框中即可(title默认为邮箱名) 你的身份( ...

  6. spring中配置数据源

    spring中配置数据源的几种常见方式: #mysql 数据库配置(jdbc.properties) jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.u ...

  7. GPC：使用GPC计算intersection容易出现的问题

    在使用GPC计算多边形的交的时候,出现问题 //1.2. 另一种方法,判断新的多边形是否和老多边形相交     Poly cross = (PolyDefault) Clip.intersection ...

  8. caffe2：conda路径和权限问题

    在使用conda之后,总是不能直接使用 conda install 命令,需要把codna添加到系统路径,取代默认Python. 在-/.bashrc中,添加 # added by Anaconda2 ...

  9. （转）Hibernate框架基础——映射普通属性

    http://blog.csdn.net/yerenyuan_pku/article/details/52739871 持久化对象与OID 对持久化对象的要求 提供一个无参的构造器.使Hibernat ...

  10. python3.x Day2 购物车程序练习

    购物车程序: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4. ...