转载自：http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table
使用的API：
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 |
|---|---|---|
| 0 | Item 0 | $0 |
| 1 | Item 1 | $1 |
| 2 | Item 2 | $2 |
| 3 | Item 3 | $3 |
| 4 | Item 4 | $4 |
| 5 | Item 5 | $5 |
| 6 | Item 6 | $6 |
| 7 | Item 7 | $7 |
| 8 | Item 8 | $8 |
| 9 | Item 9 | $9 |
| 10 | Item 10 | $10 |
| 11 | Item 11 | $11 |
| 12 | Item 12 | $12 |
| 13 | Item 13 | $13 |
| 14 | Item 14 | $14 |
| 15 | Item 15 | $15 |
| 16 | Item 16 | $16 |
| 17 | Item 17 | $17 |
| 18 | Item 18 | $18 |
| 19 | Item 19 | $19 |
| 20 | Item 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 |
|---|---|---|
| 1 | Item 1 | $1 |
| 2 | Item 2 | $2 |
| 3 | Item 3 | $3 |
| 4 | Item 4 | $4 |
| 5 | Item 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: #880000;">'"></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>