zoukankan      html  css  js  c++  java
  • bootstrap-table方法之:expandRow-collapseRow,展开或关闭当前行数据

    官方演示地址: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
  • 相关阅读:
    7-3.自定义列表
    GoLang 使用协程与管道随机生成姓名
    [Unity3D] 点击物品显示物品信息
    [Unity3D] 碰撞物体添加到背包
    [PS] DDS文件导入插件
    [Unity3D] 给角色添加武器
    [Unity3D] 刚体 碰撞器 触发器
    [Unity3D] 物体的几种移动方法
    [Unity3D] 解决导入的模型出现闪烁的问题
    [Unity3D] 人物角色跳跃(动画跳跃&刚体跳跃)
  • 原文地址:https://www.cnblogs.com/sweeeper/p/7424380.html
Copyright © 2011-2022 走看看