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

@
Password
 Remember me

Sign in

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

Get SelectionsGet DataLoad DataAppend DataRemove DataUpdate RowMerge CellsCheck AllUncheck AllShow LoadingHide LoadingRefreshShow ColumnHide Column
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的例子(转载)的更多相关文章

  1. java +bootstrap table 完整例子

    需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:

  2. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...

  3. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  4. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  5. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  6. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. Bootstrap Table使用分享

    版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...

  9. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

随机推荐

  1. http://www.cnbc.com/2016/07/12/tensions-in-south-china-sea-to-persist-even-after-court-ruling.html

    http://www.cnbc.com/2016/07/12/tensions-in-south-china-sea-to-persist-even-after-court-ruling.html T ...

  2. 使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 "消息"是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,"消息队列&qu ...

  3. Drools引擎学习

    首先上一段话: 为提高效率,管理流程必须自动化,即使现代商业规则异常复杂.市场要求业务规则经常变化,系统必须依据业务规则的变化快速.低成本的更新.为了快速.低成本的更新,业务人员应能直接管系统中的规则 ...

  4. 【转】linux(Ubuntu)配置svn仓库,搭建svn服务器

    原文网址:http://blog.1v2d.com/322.html 在家里搞了好久,终于搞出来,并且在线上已经成功搭建成功,在这感谢一个博主的文章,本篇文章也主要是转载他的内容,写的非常好,而且非常 ...

  5. oracle自动编号

    oracle自动编号 在access中有自动编号的数据类型,MSSQL和MYSQL也都有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值,而oracle没有自动增长的数据类型,我们需要建 ...

  6. C++获取本机IP地址

    对网络库简单的封装了一下,以后自己使用的时候方便了很多 #include <WinSock2.h> #pragma comment(lib,"ws2_32") //链接 ...

  7. JavaScript高级程序设计8.pdf

    基本包装类型 为了便于操作基本类型值,ECMAScript定义了3个特殊的引用类型Boolean,Number和String.这些类型与本章介绍的其他用类型相似,同时也具备与各自的基本类型相应的特殊行 ...

  8. SWMM[Storm Water Management Model]模型代码编译调试环境设置

    1. 下载计算引擎源代码后解压, 目前最新版本5-0-022. 其中包含源文件和工程文件,选择vc2005_con.在源代码目录下创建VC2005_CON目录拷贝VC2005-CON.VCPROJ 放 ...

  9. postgresql数据库的数据导出

    一.pg_dump的用法:数据库的导入导出是最常用的功能之一,每种数据库都提供有这方面的工具,例如Oracle的exp/imp,Informix的dbexp/dbimp,MySQL的mysqldump ...

  10. Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...