Bootstrap Table的例子(转载)

偏执的太偏执、 2022-08-08 17:49 6阅读 0赞

# Bootstrap Table的例子(转载) #

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

## 使用的API： ##

*  [data1.json][]
 *  [data2.json][]
 *  [data3.json][]
 *  [data4.json][]
 *  [/examples/bootstrap\_table/data?offset=0&limit=10&search=test][examples_bootstrap_table_data_offset_0_limit_10_search_test]

--------------------

## 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"`）。

<table style="width:650px; margin:0px 0px 25px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-right-width:1px; border-right-style:solid; border-right-color:rgb(221,221,221); border-collapse:collapse; border-spacing:0px"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; border-width:1px; border-style:solid; border-color:rgb(221,221,221) rgb(221,221,221) rgb(221,221,221) rgb(233,242,247); background-color:rgb(247,250,253)"> 
    <div style="">
      Item ID 
    </div> 
    <div style=""></div> </th> 
   <th style="padding:8px; border-width:1px; border-style:solid; border-color:rgb(221,221,221) rgb(221,221,221) rgb(221,221,221) rgb(233,242,247); background-color:rgb(247,250,253)"> 
    <div style="">
      Item Name 
    </div> 
    <div style=""></div> </th> 
   <th style="padding:8px; border-width:1px; border-style:solid; border-color:rgb(221,221,221) rgb(221,221,221) rgb(221,221,221) rgb(233,242,247); background-color:rgb(247,250,253)"> 
    <div style="">
      Item Price 
    </div> 
    <div style=""></div> </th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">0</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 0</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$0</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">1</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 1</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$1</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">2</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 2</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$2</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">3</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 3</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$3</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">4</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 4</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$4</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">5</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 5</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$5</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">6</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 6</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$6</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">7</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 7</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$7</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">8</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 8</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$8</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">9</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 9</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$9</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">10</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 10</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$10</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">11</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 11</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$11</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">12</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 12</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$12</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">13</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 13</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$13</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">14</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 14</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$14</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">15</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 15</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$15</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">16</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 16</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$16</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">17</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 17</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$17</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">18</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 18</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$18</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">19</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 19</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$19</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">20</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">Item 20</td> 
   <td style="padding:8px; border:1px solid rgb(221,221,221)">$20</td> 
  </tr> 
 </tbody> 
</table>

<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。

转换  摧毁

<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 的样式。

hover   striped   condensed

<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` 来设置列和表头的对齐方式。

<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` 列属性去设置表格的基本排序。

<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`列属性来定义表格的自定义排序。

<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`列属性来格式化表格列显示。

<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` 去隐藏表头。

<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` 列属性去显示列菜单用于切换。

<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）表格。

<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` 列属性来显示单选框表格。

<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` 列属性来显示复选框表格。

<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` 列属性来禁用表格选择器。

<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` 属性来允许表格只能选择一列。

<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` 属性来显示基本的工具栏。

<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` 属性来自定义工具子。

Password

Remember me

<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.

## 客户的分页 ##

开始使用例子

I18n:                              da-DK                             el-GR                             en-US                             es-AR                             fr-BE                             it-IT                             nl-NL                             pt-BR                             ru-RU                             tr-TR                             vi-VN                             zh-CN                             zh-TW                          [Translate your language?][Translate your language]

<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'` 属性来定义分页是在服务器端。

<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.

<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` 列属性来自定义列事件。

<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);`。

Get Selections Get Data Load Data Append Data Remove Data Update Row Merge Cells Check All Uncheck All Show Loading Hide Loading Refresh Show Column Hide Column

<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>

[data1.json]: http://wenzhixin.net.cn/p/bootstrap-table/docs/data1.json
[data2.json]: http://wenzhixin.net.cn/p/bootstrap-table/docs/data2.json
[data3.json]: http://wenzhixin.net.cn/p/bootstrap-table/docs/data3.json
[data4.json]: http://wenzhixin.net.cn/p/bootstrap-table/docs/data4.json
[examples_bootstrap_table_data_offset_0_limit_10_search_test]: http://wenzhixin.net.cn/examples/bootstrap_table/data?offset=0&limit=10
[Translate your language]: https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale