官方演示地址：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. wordpress网站底部的运行时间是怎么设置的？

    别人网站底部显示的网站运行时间是什么设置的?是插件的效果吗? 不用插件,一段JS代码就可以实现同样的效果. 复制如下代码到 footer.php 页脚那里 <span id="runt ...

  2. 诊断Java中的内存泄露

    每次我怀疑有内存泄漏时,我都要翻箱倒柜找这些命令.所以,这里总结一下以备后用: 首先,我用下面的命令监视进程: 1 while ( sleep 1 ) ; do ps -p $PID -o %cpu, ...

  3. Farseer.net轻量级开源框架 入门篇：分类逻辑层

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 缓存逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 ...

  4. Fiddler—重复发送一个请求的设置

    https://jingyan.baidu.com/article/b2c186c829a85dc46ff6ff60.html 选中一个request——>Reissue Sequentaill ...

  5. QT，折腾的几天-----关于 QWebEngine的使用

    几天前,不,应该是更早以前,就在寻找一种以HTML5+CSS+Javascript的方式来写桌面应用的解决方案,为什么呢?因为前端那套可以随心所欲的写样式界面啊,恩.其实我只是想使用H5的一些新增功能 ...

  6. 梦想CAD控件网页版关于自定义命令

    在CAD控件操作中,为方便使用者,使用自定义命令发出命令,完成CAD绘图,修改,保存等操作.点击此处在线演示. _DMxDrawX::RegistUserCustomCommand 向CAD控件注册一 ...

  7. ThinkPHP---TP功能类之公文管理功能2----------继续完善

    [前言] 之前已经完成了公文的添加和列表展示功能,今天继续完善.做下公文的编辑和删除功能. [主体] (1)分析 控制器:DocController.class.php 方法:edit(将模板展示和数 ...

  8. 如何做到在webpack打包vue项目后，在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  9. C: 字符数组中的空去掉

    #include <stdio.h> #include <string.h> int main() { char a[50] = "nearby! "; i ...

  10. 当点阵字库遇到3D

    早在遥远的DOS时代,点阵汉字库为计算机处理汉字起到了关键作用.当时的显示器在图形模式下的分辨率只有640x480甚至320x200,显示汉字直接使用点阵字库在屏幕上打点就可以了.如今的电脑屏幕甚至手 ...