bootstrap table 插件

最新推荐文章于 2024-04-11 11:51:27 发布

u010394201

最新推荐文章于 2024-04-11 11:51:27 发布

阅读量2.5k

点赞数

分类专栏： bootstrap 文章标签： bootstrap

bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

bootstrap table 插件

<!DOCTYPE html>
<html>
<head>
    <title>通过按钮调用事件</title>
    <meta charset="utf-8">
    <!--bootstrapJS/CSS=====-bootstrapTableJS/CSS-->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-3.3.5-dist/css/bootstrap-table.css" rel="stylesheet">
    <script src="jQuery/jquery-1.8.2.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap-table.js"></script>
</head>
<body>

<div class="btn-group">
    <button class="btn btn-default" id="get-selections">
        Get Selections
    </button>
    <button class="btn btn-default" id="get-data" data-method="getData">
        Get Data
    </button>
    <button class="btn btn-default" id="load-data" data-method="load">
        Load Data
    </button>
    <button class="btn btn-default" id="append-data" data-method="append">
        Append Data
    </button>
    <button class="btn btn-default" id="remove-data" data-method="remove">
        Remove Data
    </button>
    <button class="btn btn-default" id="update-row" data-method="updateRow">
        Update Row
    </button>
    <button class="btn btn-default" id="merge-cells">
        Merge Cells
    </button>
    <button class="btn btn-default" id="check-all" data-method="checkAll">
        Check All
    </button>
    <button class="btn btn-default" id="uncheck-all" data-method="uncheckAll">
        Uncheck All
    </button>
    <button class="btn btn-default" id="show-loading" data-method="showLoading">
        Show Loading
    </button>
    <button class="btn btn-default" id="hide-loading" data-method="hideLoading">
        Hide Loading
    </button>
    <button class="btn btn-default" id="refresh" data-method="refresh">
        Refresh
    </button>
    <button class="btn btn-default" id="show-column" data-method="showColumn">
        Show Column
    </button>
    <button class="btn btn-default" id="hide-column" data-method="hideColumn">
        Hide Column
    </button>
</div>
<table id="table-methods-table" data-height="299">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>
<script>
    $(function () {
//        $('#table-methods').next().click(function () {
//            $(this).hide();

            var id = 0,
                    getRows = function () {
                        var rows = [];

                        for (var i = 0; i < 10; i++) {
                            rows.push({
                                id: id,
                                name: 'test' + id,
                                price: '$' + id
                            });
                            id++;
                        }
                        return rows;
                    },
            // init table use data
                    $table = $('#table-methods-table').bootstrapTable({
                        data: getRows()
                    });

            $('#get-selections').click(function () {
                alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
            });
            $('#get-data').click(function () {
                alert('current data: ' + JSON.stringify($table.bootstrapTable('getData')));
            });
            // This demonstrates utilizing the data-method attribute to use one
            //     jQuery handler to execute multiple methods.
            // ($this).data('method') retrieves the value of the data-method
            //     attribute of the object that was clicked which is then passed to
            //     the bootstrapTable function.
            // Only the load and append methods require a parameter
            $('#load-data, #append-data, #check-all, #uncheck-all, ' +
                    '#show-loading, #hide-loading').click(function () {
                        $table.bootstrapTable($(this).data('method'), getRows());
                    });
            $('#refresh').click(function () {
                $table.bootstrapTable('refresh', {
                    url: 'data2.json'
                });
            });
            $('#remove-data').click(function () {
                var selects = $table.bootstrapTable('getSelections');
                ids = $.map(selects, function (row) {
                    return row.id;
                });

                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                });
            });
            $('#update-row').click(function () {
                $table.bootstrapTable('updateRow', {
                    index: 1,
                    row: {
                        name: 'test111111',
                        price: '$111111'
                    }
                });
            });
            $('#merge-cells').click(function () {
                $table.bootstrapTable('mergeCells', {
                    index: 1,
                    field: 'name',
                    colspan: 2,
                    rowspan: 3
                })
            });
            $('#show-column, #hide-column').click(function () {
                $table.bootstrapTable($(this).data('method'), 'id');
            });
//        });
    });
</script>

</body>
</html>

u010394201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap table 插件

bootstrap table 插件<!DOCTYPE html><html><head> <title>通过按钮调用事件</title> <meta charset="utf-8">  <link href="bootstrap-3.3.5-dist/css/boot
复制链接

扫一扫