記錄關(guān)于Bootstrap Table的一些實用配置睬隶。
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ù)，以下記錄幾個比較常用的
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
當值為true顯示行間隔條紋效果
pagination
當值為true顯示分頁條
sidePagination
可選值為'server'庸疾、'client'，分別表示服務(wù)端分頁和客戶端分頁
pageSize
每頁數(shù)量当编，默認值10
pageList
值為一個數(shù)組届慈，提供每頁可選數(shù)量的選擇
rowStyle
對行樣式的設(shè)置，對應(yīng)函數(shù)的兩個參數(shù)為row, index
例：
rowStyle: function (row, index) {
var strClass = '';
if (row.age < 18) {
strClass = 'text-danger';
}
return {classes: strClass}
}
columns
表格列配置項忿偷，常用的有
| 列配置項 | 描述 |
|---|---|
| field | json數(shù)據(jù)的列 |
| title | 列標題 |
| titleTooltip | 列標題提示 |
| class | 該列樣式（class） |
| align | 對齊方式（left金顿、right、center） |
例：
columns: [{
field: 'id',
title: '編號',
titleTooltip: '編號提示',
class: 'text-danger',
align: 'center',
}]
還有一個非常有用的列配置項：formatter鲤桥，可以在表格中寫html揍拆，使表格內(nèi)容不限于文本內(nèi)容，對應(yīng)函數(shù)的三個參數(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: '編號'
}, {
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ù)）兩項內(nèi)容茶凳，點擊頁碼按鈕會向后端傳遞offset和limit參數(shù)嫂拴，使用PageHelper.offsetPage(offset, limit);方法可以簡單快速地進行分頁播揪。
分頁內(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 +
'}';
}
}
返回數(shù)據(jù)
僅在web層接收offset和limit參數(shù)就可以完美分頁，使得對項目的侵入性非常小
@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/
注意事項
對表格數(shù)據(jù)進行增刪查改后想立即看到效果通常會使用
$('#table').bootstrapTable('refresh');
進行刷新操作筒狠，以下列舉了測試中出現(xiàn)的兩種問題（都是由服務(wù)端分頁的offset參數(shù)引起的問題）猪狈，并提出解決方案（建議每次增刪查改后都采用這兩種方案）。
條件查詢
服務(wù)端分頁時bootstrap table根據(jù)分頁條所在的位置傳遞offset參數(shù)辩恼，若從第二頁開始查詢雇庙，而所查詢數(shù)據(jù)的總數(shù)量少于每頁顯示數(shù)量，就會出現(xiàn)顯示查詢數(shù)量為0的結(jié)果灶伊。
刪除操作
在第一頁后的頁面疆前，若只有一行數(shù)據(jù)，點擊刪除聘萨，刷新后分頁條消失竹椒，顯示沒有數(shù)據(jù)。
解決方案
1.每次查詢操作后先銷毀bootstrap table匈挖，再用js啟動
function initTable() {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url : ...
...
});
}
2.在每次提交操作后返回首頁
$('#table').bootstrapTable('selectPage', 1);
完整項目下載
一個結(jié)合Spring Boot進行單頁面增刪查改的小例子：Bootstrap-Table-test
有Spring基礎(chǔ)的可以快速入門：Soring Boot學(xué)習(xí)筆記
