記錄關(guān)于Bootstrap Table的一些實(shí)用配置。
html
引入相關(guān)文件
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
頁面內(nèi)容
<!-- 查詢工具欄 -->
<div class="form-inline">
<div class="form-group">
<label for="queryNameText">姓名：</label>
<input id="queryNameText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="queryAgeText">年齡：</label>
<input id="queryAgeText" class="form-control input-sm">
</div>
<button class="btn btn-primary btn-sm" id="queryBtn">查詢</button>
<button class="btn btn-primary btn-sm" id="resetBtn">重置</button>
<button class="btn btn-primary btn-sm" id="addBtn">新增</button>
</div>
<hr>
<table id="testTable"></table>
使用js方式加載table
官方文檔上提供了詳盡的配置參數(shù)，以下記錄幾個(gè)比較常用的
url
后端數(shù)據(jù)交互url，要求返回json數(shù)據(jù)，且包含rows（查詢內(nèi)容）和total（數(shù)據(jù)總數(shù)）
queryParams
數(shù)據(jù)加載參數(shù)，必須要有offset和limit參數(shù)，支持通過json格式自定義查詢參數(shù)
例，自定義name和age作為查詢參數(shù)：
queryParams: function (params) {
return {
offset: params.offset,
limit: params.limit,
name: $('#queryNameText').val(),
age: $('#queryAgeText').val()
}
}
striped
當(dāng)值為true顯示行間隔條紋效果
pagination
當(dāng)值為true顯示分頁條
sidePagination
可選值為'server'、'client'，分別表示服務(wù)端分頁和客戶端分頁
pageSize
每頁數(shù)量，默認(rèn)值10
pageList
值為一個(gè)數(shù)組，提供每頁可選數(shù)量的選擇
rowStyle
對(duì)行樣式的設(shè)置，對(duì)應(yīng)函數(shù)的兩個(gè)參數(shù)為row, index
例：
rowStyle: function (row, index) {
var strClass = '';
if (row.age < 18) {
strClass = 'text-danger';
}
return {classes: strClass}
}
columns
表格列配置項(xiàng)，常用的有
| 列配置項(xiàng) | 描述 |
|---|---|
| field | json數(shù)據(jù)的列 |
| title | 列標(biāo)題 |
| titleTooltip | 列標(biāo)題提示 |
| class | 該列樣式（class） |
| align | 對(duì)齊方式（left、right、center） |
例：
columns: [{
field: 'id',
title: '編號(hào)',
titleTooltip: '編號(hào)提示',
class: 'text-danger',
align: 'center',
}]
還有一個(gè)非常有用的列配置項(xiàng)：formatter，可以在表格中寫html，使表格內(nèi)容不限于文本內(nèi)容，對(duì)應(yīng)函數(shù)的三個(gè)參數(shù)為value, row, index
例：
columns: [{
formatter: function (value, row, index) {
return [
'<a href="javascript:modifyPer(' + row.id + ",'" + row.name + "'," + row.age + ",'" + row.address + "'" + ')">' +
'<i class="glyphicon glyphicon-pencil"></i>修改' +
'</a>',
'<a href="javascript:delPer(' + row.id + ')">' +
'<i class="glyphicon glyphicon-remove"></i>刪除' +
'</a>'
].join('');
},
title: '操作'
}]
效果如圖：
本例中使用的配置
var $testTable = $('#testTable');
$testTable.bootstrapTable({
url: '/getPers',
queryParams: function (params) {
return {
offset: params.offset,
limit: params.limit,
name: $('#queryNameText').val(),
age: $('#queryAgeText').val()
}
},
columns: [{
field: 'id',
title: '編號(hào)'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年齡'
}, {
field: 'address',
title: '地址'
}, {
formatter: function (value, row, index) {
return [
'<a href="javascript:modifyPer(' + row.id + ",'" + row.name + "'," + row.age + ",'" + row.address + "'" + ')">' +
'<i class="glyphicon glyphicon-pencil"></i>修改' +
'</a>',
'<a href="javascript:delPer(' + row.id + ')">' +
'<i class="glyphicon glyphicon-remove"></i>刪除' +
'</a>'
].join('');
},
title: '操作'
}],
striped: true,
pagination: true,
sidePagination: 'server',
pageSize: 10,
pageList: [5, 10, 25, 50, 100],
rowStyle: function (row, index) {
var ageClass = '';
if (row.age < 18) {
ageClass = 'text-danger';
}
return {classes: ageClass}
},
});
與分頁插件pagehelper結(jié)合使用
服務(wù)端分頁要求返回的json數(shù)據(jù)必須包含rows（查詢內(nèi)容）和total（數(shù)據(jù)總數(shù)）兩項(xiàng)內(nèi)容，點(diǎn)擊頁碼按鈕會(huì)向后端傳遞offset和limit參數(shù)，使用PageHelper.offsetPage(offset, limit);方法可以簡單快速地進(jìn)行分頁。
分頁內(nèi)容工具類
/**
* 用于返回分頁結(jié)果
*/
public class PaginationResult {
private long total;
private List<?> rows;
public PaginationResult(long total, List<?> rows) {
this.total = total;
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List<?> getRows() {
return rows;
}
public void setRows(List<?> rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PaginationResult{" +
"total=" + total +
", rows=" + rows +
'}';
}
}
返回?cái)?shù)據(jù)
僅在web層接收offset和limit參數(shù)就可以完美分頁，使得對(duì)項(xiàng)目的侵入性非常小
@RequestMapping("/getPers")
public @ResponseBody
PaginationResult getPers(int offset, int limit, String name, String age) {
Page<Object> page = PageHelper.offsetPage(offset, limit);
List<Per> pers = perService.getPers(name, age);
return new PaginationResult(page.getTotal(), pers);
}
效果樣例
http://106.14.200.121/bstabletest/
注意事項(xiàng)
對(duì)表格數(shù)據(jù)進(jìn)行增刪查改后想立即看到效果通常會(huì)使用
$('#table').bootstrapTable('refresh');
進(jìn)行刷新操作，以下列舉了測試中出現(xiàn)的兩種問題（都是由服務(wù)端分頁的offset參數(shù)引起的問題），并提出解決方案（建議每次增刪查改后都采用這兩種方案）。
條件查詢
服務(wù)端分頁時(shí)bootstrap table根據(jù)分頁條所在的位置傳遞offset參數(shù)，若從第二頁開始查詢，而所查詢數(shù)據(jù)的總數(shù)量少于每頁顯示數(shù)量，就會(huì)出現(xiàn)顯示查詢數(shù)量為0的結(jié)果。
刪除操作
在第一頁后的頁面，若只有一行數(shù)據(jù)，點(diǎn)擊刪除，刷新后分頁條消失，顯示沒有數(shù)據(jù)。
解決方案
1.每次查詢操作后先銷毀bootstrap table，再用js啟動(dòng)
function initTable() {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url : ...
...
});
}
2.在每次提交操作后返回首頁
$('#table').bootstrapTable('selectPage', 1);
完整項(xiàng)目下載
一個(gè)結(jié)合Spring Boot進(jìn)行單頁面增刪查改的小例子：Bootstrap-Table-test
有Spring基礎(chǔ)的可以快速入門：Soring Boot學(xué)習(xí)筆記
