Bootstrap Table的例子(转载)

时间：2015-10-23 22:56:13 阅读：10352 评论：0 收藏：0 [点我收藏+]

转载自：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 的样式。

hover striped condensed

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.

客户的分页

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?

	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>

Bootstrap Table的例子(转载)

原文：http://www.cnblogs.com/Tmc-Blog/p/4905870.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)