Bootstrap Table的例子(转载)
转载自：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 属性来自定义工具子。
@
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的例子(转载)的更多相关文章
- java +bootstrap table 完整例子
需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- Bootstrap Table使用分享
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
随机推荐
- ZOOKEEPER在CENTOS6上的再安装
作DUBBO时,肯定是需要的,,对的,,DUBBO也要熟悉一下才行啦.. URL: http://www.centoscn.com/CentosServer/test/2015/0120/4531.h ...
- ViewHolder VS HolderView ?
ViewHolder 模式在 Android 中大家应该都不陌生了,特别是在 ListView 中通过 ViewHolder 来减少 findViewById 的调用和 类型的转换. 而 Holder ...
- 创建range分区
drop table T_PM_ACCT_DTL_AF_TEST; create table T_PM_ACCT_DTL_AF_TEST ( DATA_DATE date, AC ...
- apk，task，android:process与android:sharedUserId的区别
apk一般占一个dalvik,一个进程,一个task.通过设置也可以多个进程,占多个task. task是一个activity的栈,其中"可能"含有来自多个App的activity ...
- Invitation Cards（邻接表+逆向建图+SPFA）
Time Limit: 8000MS Memory Limit: 262144K Total Submissions: 17538 Accepted: 5721 Description In ...
- BZOJ1613: [Usaco2007 Jan]Running贝茜的晨练计划
1613: [Usaco2007 Jan]Running贝茜的晨练计划 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1138 Solved: 554[ ...
- Spring - Sring MVC入门
2．1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...
- oracle自动编号
oracle自动编号 在access中有自动编号的数据类型,MSSQL和MYSQL也都有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值,而oracle没有自动增长的数据类型,我们需要建 ...
- CSU 1511 残缺的棋盘 第十届湖南省赛题
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1511 题目大意:在一个8*8的棋盘中,给你一个起点位置和一个终点位置,同时也给你一个陷阱 ...
- Android Studio下载及离线升级方法
由于众所周知的原因,android官网无法访问,所以我们要用到翻.墙.工具,我用的是自.由.门,大家自行搜索下载. android studio下载地址: https://dl.google.com/ ...