Bootstrap Table的例子(转载)

最新推荐文章于 2025-06-14 04:06:57 发布
转载 最新推荐文章于 2025-06-14 04:06:57 发布 · 1.7w 阅读 · 2
文章标签：

#Bootstrap Table的例子转载

本文提供BootstrapTable的使用示例，包括AJAX请求、基本表、转换表、样式设置、列对齐、排序、分页、表选择器、工具栏、事件处理和方法调用等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Bootstrap Table的例子(转载)


转载自：http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table

AJAX:

Use url, method, cache, contentType, dataType, queryParams, queryParamsType, responseHandler options to set the AJAX request and response params.

基本表格

不通过JavaScript的方式启动Bootstrap Table（使用data-toggle="table"）。

Item ID
Item Name
Item Price
Item ID
Item Name
Item Price
0Item 0$0
1Item 1$1
2Item 2$2
3Item 3$3
4Item 4$4
5Item 5$5
6Item 6$6
7Item 7$7
8Item 8$8
9Item 9$9
10Item 10$10
11Item 11$11
12Item 12$12
13Item 13$13
14Item 14$14
15Item 15$15
16Item 16$16
17Item 17$17
18Item 18$18
19Item 19$19
20Item 20$20
<table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

表格转换

从已经存在、未被格式化的表格中转换为Bootstrap Table。

Item ID Item Name Item Price
1Item 1$1
2Item 2$2
3Item 3$3
4Item 4$4
5Item 5$5
<div id="transform-buttons" class="btn-group btn-default">
    <button class="btn btn-default" id="transform">
        <i class="glyphicon glyphicon-transfer"></i> <span data-zh="转换" data-es="Transformar">Transform</span>
    </button>
    <button class="btn btn-default" id="destroy">
        <i class="glyphicon glyphicon-trash"></i> <span data-zh="摧毁" data-es="Destruir">Destroy</span>
    </button>
</div>
<table id="table-transform" data-toolbar="#transform-buttons">
    <thead>
    <tr>
        <th>Item ID</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
    </thead>
    <tbody>
    <tr id="tr_id_1" class="tr-class-1">
        <td id="td_id_1" class="td-class-1">1</td>
        <td>Item 1</td>
        <td>$1</td>
    </tr>
    <tr id="tr_id_2" class="tr-class-2">
        <td id="td_id_2" class="td-class-2">2</td>
        <td>Item 2</td>
        <td>$2</td>
    </tr>
    <tr id="tr_id_3" class="tr-class-3">
        <td id="td_id_3" class="td-class-3">3</td>
        <td>Item 3</td>
        <td>$3</td>
    </tr>
    <tr id="tr_id_4" class="tr-class-4">
        <td id="td_id_4" class="td-class-4">4</td>
        <td>Item 4</td>
        <td>$4</td>
    </tr>
    <tr id="tr_id_5" class="tr-class-5">
        <td id="td_id_5" class="td-class-5">5</td>
        <td>Item 5</td>
        <td>$5</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        var $table = $('#table-transform');
        $('#transform').click(function () {
            $table.bootstrapTable();
        });
        $('#destroy').click(function () {
            $table.bootstrapTable('destroy');
        });
    });
</script>

表格样式

用height, classes, striped, rowStyle 属性和class, width, cellStyle 列属性设置 bootstrap table 的样式。

   
Item ID  Item Name  Item Price
<div>
    <label><input id="hover" type="checkbox" checked=""> hover</label>
    <label><input id="striped" type="checkbox"> striped</label>
    <label><input id="condensed" type="checkbox"> condensed</label>
</div>
<table id="table-style" data-url="data1.json" data-height="400" data-row-style="rowStyle">
    <thead>
    <tr>
        <th data-field="id" class="col-md-2">Item ID</th>
        <th data-field="name" class="col-md-6">
            <i class="glyphicon glyphicon-star"></i>
            Item Name
        </th>
        <th data-field="price" class="col-md-4">
            <i class="glyphicon glyphicon-heart"></i>
            Item Price
        </th>
    </tr>
    </thead>
</table>
<script>
    $(function () {
        $('#hover, #striped, #condensed').click(function () {
            var classes = 'table';

            if ($('#hover').prop('checked')) {
                classes += ' table-hover';
            }
            if ($('#condensed').prop('checked')) {
                classes += ' table-condensed';
            }
            $('#table-style').bootstrapTable('destroy')
                .bootstrapTable({
                    classes: classes,
                    striped: $('#striped').prop('checked')
                });
        });
    });

    function rowStyle(row, index) {
        var classes = ['active', 'success', 'info', 'warning', 'danger'];

        if (index % 2 === 0 && index / 2 < classes.length) {
            return {
                classes: classes[index / 2]
            };
        }
        return {};
    }
</script>

列对齐

使用 align, halign 和 valign 来设置列和表头的对齐方式。

Item ID Item Name Item Price
<table data-url="data1.json" data-height="299">
    <thead>
    <tr>
        <th data-field="id" data-halign="right" data-align="center">Item ID</th>
        <th data-field="name" data-halign="center" data-align="left">Item Name</th>
        <th data-field="price" data-halign="left" data-align="right">Item Price</th>
    </tr>
    </thead>
</table>

表格排序

基本排序

使用 sortName, sortOrder, sortable 属性和 sortable, order 列属性去设置表格的基本排序。

Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">
    <thead>
        <tr>
            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
            <th data-field="price" data-sortable="true">Item Price</th>
        </tr>
    </thead>
</table>

自定义排序

使用 sorter列属性来定义表格的自定义排序。

Item ID Item Name Item Price
<table id="table-custom-sort" data-url="data1.json" data-height="299" data-sort-name="price" data-sort-order="desc">
    <thead>
    <tr>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
    </tr>
    </thead>
</table>
<script>
    function priceSorter(a, b) {
        a = +a.substring(1); // remove $
        b = +b.substring(1);
        if (a > b) return 1;
        if (a < b) return -1;
        return 0;
    }
</script>

格式化表格

使用 formatter列属性来格式化表格列显示。

Item ID Item Name Item Price
<table id="table-format" data-url="data1.json" data-height="299">
    <thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name" data-formatter="nameFormatter">Item Name</th>
        <th data-field="price" data-formatter="priceFormatter">Item Price</th>
    </tr>
    </thead>
</table>
<script>
    function nameFormatter(value, row) {
        var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'

        return '<ihljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'"></i> ' + value;
    }

    function priceFormatter(value) {
        // 16777215 == ffffff in decimal
        var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
        return '<div  style="color: ' + color + '">' +
                '<i></i>' +
                value.substring(1) +
                '</div>';
    }
</script>

隐藏表头

使用 showHeader: false 去隐藏表头。

Item Name Item Price
<table data-url="data1.json" data-height="299" data-show-header="false">
    <thead>
    <tr>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>

显示列选项

基本显示

使用 showColumns, minimumCountColumns 属性和 visible, switchable 列属性去显示列菜单用于切换。

  Name Price Columns1 Columns2 Columns3 Columns4
<table data-url="data3.json" data-height="299" data-show-columns="true" data-id-field="id">
    <thead>
    <tr>
        <th data-field="state" data-radio="true"></th>
        <th data-field="name" data-switchable="false">Name</th>
        <th data-field="price">Price</th>
        <th data-field="column1">Columns1</th>
        <th data-field="column2" data-visible="false">Columns2</th>
        <th data-field="column3" data-switchable="false">Columns3</th>
        <th data-field="column4" data-visible="false">Columns4</th>
    </tr>
    </thead>
</table>

超多列显示

Bootstrap table 支持超多列，会自动显示水平滚动条。

<table id="table-large-columns" data-height="400" data-show-columns="true"></table>
<script>
    $(function () {
        $('#large-columns-table').next().click(function () {
            $(this).hide();
            buildTable($('#table-large-columns'), 50, 50);
        });
    });
</script>

名片（card）表格

使用cardView: true属性去显示名片（card）表格。

Name License Description Url
<table data-url="data4.json" data-height="299" data-card-view="true" data-response-handler="responseHandler">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="license">License</th>
        <th data-field="description">Description</th>
        <th data-field="url">Url</th>
    </tr>
    </thead>
</table>
<script>
    // client side
    function responseHandler(res) {
        return res.repos;
    }

    // server side
    /*
    function responseHandler(res) {
        return {
            rows: res.repos;
            total: res.repos.length
        }
    }
    */
</script>

表格选择器

单选框

使用 clickToSelect, selectItemName 属性和 radio 列属性来显示单选框表格。

  Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName">
    <thead>
        <tr>
            <th data-field="state" data-radio="true"></th>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="left">Item Price</th>
        </tr>
    </thead>
</table>

复选框

使用 clickToSelect 属性和 radio 列属性来显示复选框表格。

  Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-click-to-select="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="">Item Price</th>
        </tr>
    </thead>
</table>

禁用的复选框

使用 checkboxHeader, checkboxEnable 属性和 radio 列属性来禁用表格选择器。

  Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-click-to-select="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true" data-formatter="stateFormatter"></th>
        <th data-field="id" data-align="right">Item ID</th>
        <th data-field="name" data-align="center">Item Name</th>
        <th data-field="price" data-align="">Item Price</th>
    </tr>
    </thead>
</table>
<script>
    function stateFormatter(value, row, index) {
        if (index === 2) {
            return {
                disabled: true
            };
        }
        if (index === 5) {
            return {
                disabled: true,
                checked: true
            }
        }
        return value;
    }
</script>

只能单选的复选框

使用 singleSelect 属性来允许表格只能选择一列。

  Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-click-to-select="true" data-single-select="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-align="right">Item ID</th>
        <th data-field="name" data-align="center">Item Name</th>
        <th data-field="price" data-align="">Item Price</th>
    </tr>
    </thead>
</table>

表格工具栏

基本工具栏

使用 search, showColumns, showRefresh, showToggle 属性来显示基本的工具栏。

Item ID Item ID Item Name Item Price
<table data-url="data1.json" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="state" data-radio="true">Item ID</th>
        <th data-field="id" data-align="right">Item ID</th>
        <th data-field="name" data-align="center">Item Name</th>
        <th data-field="price" data-align="left">Item Price</th>
    </tr>
    </thead>
</table>

自定义工具栏

使用 toolbar 属性来自定义工具子。

@

Item ID Item Name Item Price
<div id="custom-toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">@</div>
                <input class="form-control" type="email" placeholder="Enter email">
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
    </div>
</div>
<table data-url="data1.json" data-height="299" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
    <thead>
    <tr>
        <th data-field="id" data-align="right">Item ID</th>
        <th data-field="name" data-align="center">Item Name</th>
        <th data-field="price" data-align="">Item Price</th>
    </tr>
    </thead>
</table>

分页

Use pagination, sidePagination, pageNumber, pageSize, pageList options to set the pagination options.

客户的分页

  Item ID Item Name Item Price
<table id="table-pagination" data-url="data2.json" data-height="400" data-pagination="true" data-search="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
            <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
        </tr>
    </thead>
</table>

服务器端分页

使用 sidePagination: 'server' 属性来定义分页是在服务器端。

  Item ID Item Name Item Price
<table data-url="/examples/bootstrap_table/data" data-height="400" data-side-pagination="server" data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>

表格事件

基本事件

Here is the result of event.
  Item ID Item Name Item Price
<div class="alert alert-success" id="events-result" data-es="Aquí se muestra el resultado del evento">
    Here is the result of event.
</div>
<table id="events-table" data-url="data2.json" data-height="299" data-search="true" data-pagination="true" data-show-columns="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-sortable="true">Item ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>
<script>
    $(function () {
        $('#basic-events-table').next().click(function () {
            $(this).hide();

            var $result = $('#events-result');

            $('#events-table').bootstrapTable({
                /*
                onAll: function (name, args) {
                    console.log('Event: onAll, data: ', args);
                }
                onClickRow: function (row) {
                    $result.text('Event: onClickRow, data: ' + JSON.stringify(row));
                },
                onDblClickRow: function (row) {
                    $result.text('Event: onDblClickRow, data: ' + JSON.stringify(row));
                },
                onSort: function (name, order) {
                    $result.text('Event: onSort, data: ' + name + ', ' + order);
                },
                onCheck: function (row) {
                    $result.text('Event: onCheck, data: ' + JSON.stringify(row));
                },
                onUncheck: function (row) {
                    $result.text('Event: onUncheck, data: ' + JSON.stringify(row));
                },
                onCheckAll: function () {
                    $result.text('Event: onCheckAll');
                },
                onUncheckAll: function () {
                    $result.text('Event: onUncheckAll');
                },
                onLoadSuccess: function (data) {
                    $result.text('Event: onLoadSuccess, data: ' + data);
                },
                onLoadError: function (status) {
                    $result.text('Event: onLoadError, data: ' + status);
                },
                onColumnSwitch: function (field, checked) {
                    $result.text('Event: onSort, data: ' + field + ', ' + checked);
                },
                onPageChange: function (number, size) {
                    $result.text('Event: onPageChange, data: ' + number + ', ' + size);
                },
                onSearch: function (text) {
                    $result.text('Event: onSearch, data: ' + text);
                }
                */
            }).on('all.bs.table', function (e, name, args) {
                console.log('Event:', name, ', data:', args);
            }).on('click-row.bs.table', function (e, row, $element) {
                $result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
            }).on('dbl-click-row.bs.table', function (e, row, $element) {
                $result.text('Event: dbl-click-row.bs.table, data: ' + JSON.stringify(row));
            }).on('sort.bs.table', function (e, name, order) {
                $result.text('Event: sort.bs.table, data: ' + name + ', ' + order);
            }).on('check.bs.table', function (e, row) {
                $result.text('Event: check.bs.table, data: ' + JSON.stringify(row));
            }).on('uncheck.bs.table', function (e, row) {
                $result.text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
            }).on('check-all.bs.table', function (e) {
                $result.text('Event: check-all.bs.table');
            }).on('uncheck-all.bs.table', function (e) {
                $result.text('Event: uncheck-all.bs.table');
            }).on('load-success.bs.table', function (e, data) {
                $result.text('Event: load-success.bs.table');
            }).on('load-error.bs.table', function (e, status) {
                $result.text('Event: load-error.bs.table, data: ' + status);
            }).on('column-switch.bs.table', function (e, field, checked) {
                $result.text('Event: column-switch.bs.table, data: ' +
                    field + ', ' + checked);
            }).on('page-change.bs.table', function (e, size, number) {
                $result.text('Event: page-change.bs.table, data: ' + number + ', ' + size);
            }).on('search.bs.table', function (e, text) {
                $result.text('Event: search.bs.table, data: ' + text);
            });
        });
    });
</script>

列事件

使用 formatter, events 列属性来自定义列事件。

  Item ID Item Name Item Price Item Operate
<table id="events-id2" data-url="data1.json" data-height="299" data-search="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-sortable="true">Item ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
    </tr>
    </thead>
</table>
<script>
    function operateFormatter(value, row, index) {
        return [
            '<a href="javascript:void(0)" title="Like">',
                '<i></i>',
            '</a>',
            '<a href="javascript:void(0)" title="Edit">',
                '<i></i>',
            '</a>',
            '<a href="javascript:void(0)" title="Remove">',
                '<i></i>',
            '</a>'
        ].join('');
    }

    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            alert('You click edit icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            alert('You click remove icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        }
    };
</script>

表格方法

方法的使用语法为: $('#table').bootstrapTable('method', parameter);。

  Item ID Item Name Item Price
<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: 'data1.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>

通过JavaScript启用

<table id="table-javascript"></table>
<script>
    $(function () {
        $('#via-javascript-table').next().click(function () {
            $(this).hide();

            $('#table-javascript').bootstrapTable({
                method: 'get',
                url: 'data2.json',
                cache: false,
                height: 400,
                striped: true,
                pagination: true,
                pageSize: 50,
                pageList: [10, 25, 50, 100, 200],
                search: true,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                columns: [{
                    field: 'state',
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'Item ID',
                    align: 'right',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'name',
                    title: 'Item Name',
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    formatter: nameFormatter
                }, {
                    field: 'price',
                    title: 'Item Price',
                    align: 'left',
                    valign: 'top',
                    sortable: true,
                    formatter: priceFormatter,
                    sorter: priceSorter
                }, {
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: operateFormatter,
                    events: operateEvents
                }]
            });
        });
    });
</script>
【分布式事务与分库分表】
我是Java程序员廖志伟，感谢朋友们的支持！
04-07 515
🌟我是廖志伟，一名Java开发工程师、Java领域优质创作者、优快云博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作者、产品软文专业写手、技术文章评审老师、问卷调查设计师、个人社区创始人、开源项目贡献者。🌎跑过十五公里、🚀徒步爬过衡山、🔥有过三个月减肥20斤的经历、是个喜欢躺平的狠人。
BAT 大厂Java 面试题集锦之核心篇附参考答案
热门推荐
AI天才研究院
11-05 1万+
核心篇数据结构与算法网路:TCP/IP,HTTP操作系统, 文件, shell, CPU, IO, epoll, 非阻塞IO,进程/线程/协程,锁HashMap, Co...
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
BootstrapTable使用实例
duansamve的博客
08-31 3018
一、bootstrapTable简单使用： <link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css"> &lt...
Bootstrap Table强大的web数据表格渲染框架
最新发布
weixin_40998122的博客
06-14 51
Bootstrap Table 是一款完全兼容 Bootstrap 3/4 的 JavaScript 表格插件，通过 HTML5 data 属性与 JavaScript 配置的双重驱动，实现了响应式表格的快速开发。零侵入性：无需修改 Bootstrap 原生样式，支持渐进式集成组件化架构：基础功能与扩展插件分离，支持按需加载标准化交互：遵循 Bootstrap 设计规范，确保用户体验一致性跨平台适配：自动适应 PC 端与移动端的屏幕尺寸变化自适应布局：通过启用智能列隐藏，移动端自动切换为堆叠视图。
bootstrap-table示例
赶路人儿
06-17 1319
废话不多说，先上一个基本示例，然后逐步介绍功能和配置。 1、远程加载列表数据： 1）引入库： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/boot
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
bootstrap table 例子
08-16
bootstrap table 例子，从最基础的到可扩展的，一步一步，从配置选项到js配置，应有尽有。
【油猴脚本】00015 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。优化UI界面，Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
宝码香车的博客
09-24 2799
附具体完整代码，深入理解，彻底掌握！
【油猴脚本】00016 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。美化编辑表格的UI界面，Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
宝码香车的博客
09-24 1274
附具体完整代码，深入理解，彻底掌握！
转载+收藏 数理化地生常用软件
weixin_30359021的博客
02-20 4781
一 数学： 1、数学软件： （1）常见的通用数学软件包包括：Matlab和Mathematica和Maple，其中Matlab以数值计算见长，Mathematica和Maple以符号运算、公式推导见长（2）专用数学包包括： 绘图软件类：MathCAD,Tecplot,IDL,Surfer,Origin,SmartDraw,DSP2000 数值计算类：Matcom,D...
bootstrap-table的实例编写
10-02
bootstrap-table的实例编写 bootstrap-table的实例编写
bootstrapTable实例源码
12-07
bootstrapTable的动态分页绑定，以及数据的新增，修改，删除等功能都有详细注释。非常方便大家学习
bootstrap-table案例
05-05
该资源暂时只有查询功能，增删改未添加，相关文章：http://blog.youkuaiyun.com/sutongxuevip/article/details/56485113
bootstrap table表格实例,基于javaweb的bootstrap table实例源码下载
02-07
本实例针对bootstrap中table的使用方法，通过ajax远程调用服务器实现table的显示、分页、查询。
bootstrap_table 例子
01-10
bootstrap_table 例子 非常实用，很好的 欢迎下载
BootstrapTable简单的例子
WangCode
11-13 550
BootstrapTable简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Demo</title> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href=
bootstrap table实例
伟强的博客
04-15 5902
bootstrap table是一个非常好用，且功能很全的表格插件 在使用bootstrap table之前，需要将bootstrap-table.js 和bootstrap-table.css引入到工程中，两个文件的现在地址为：http://bootstrap-table.wenzhixin.net.cn/ 我的工程目录如下图所示： 我的测试文件是test2.html，文件中引用t
bootstrapTable使用例子
写BUG的低低低手
08-21 479
效果图 JSP <script type="text/javascript"> //公交运行信息列表---下拉列表 $.post("busRunInfoSelect", function(data) { for(i=0;i<=data.length-1;i++){ $("#busSelect").append("<option value='"+...
Bootstrap Table详细使用教程
$('#table').bootstrapTable('refresh'); // 隐藏模态对话框 $('#productModal').modal('hide'); }, error: function() { // 处理错误情况 } }); }); ``` 以上就是使用Bootstrap Table的基本步骤。通过配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值