码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-table方法之:expandRow-collapseRow,展开或关闭当前行数据

时间:2017-08-24 20:11:01      阅读:1773      评论:0      收藏:0      [点我收藏+]

标签:tail   www.   代码   charset   ice   oct   toggle   str   mat   

官方演示地址: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,展开或关闭当前行数据

标签:tail   www.   代码   charset   ice   oct   toggle   str   mat   

原文地址:http://www.cnblogs.com/sweeeper/p/7424380.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!