bootstrap-table使用總結
阿新 • • 發佈：2021-06-24
bootstrap-table基本介紹
在業務系統開發中，對錶格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發中，可以採用很多功能強大的外掛來滿足要求，且能極大的提高開發效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格外掛，在很多專案中廣泛的應用。Bootstrap-table外掛提供了非常豐富的屬性設定，可以實現查詢、分頁、排序、複選框、設定顯示列、Card view檢視、主從表顯示、合併列、國際化處理等處理功能，而且該外掛同時也提供了一些不錯的擴充套件功能，如移動行、移動列位置等一些特殊的功能，外掛可以用基於HTML5的data-*屬性標識設定，也可以使用Javascript方式進行設定，非常方便。本篇隨筆介紹bootstrap-table外掛在我實際專案中的應用情況，總結相關使用中碰到的問題處理經驗。
資料顯示方式
Bootstrap-Table顯示資料到表格的方式有兩種，一種是客戶端（client）模式，一種是伺服器（server）模式。
客戶端模式：指的是在伺服器中把要顯示到表格的資料一次性加載出來，然後轉換成JSON格式傳到要顯示的介面中，客戶端模式較為簡單，它是把資料一次性加載出來放到介面上，然後根據你設定的每頁記錄數，自動生成分頁。當點選第二頁時，會自動加載出資料，不會再向伺服器傳送請求。同時使用者可以使用其自帶的搜尋功能，可以實現全資料搜尋。對於資料量較少的時候，可以使用這個方法。
伺服器模式：指的是根據設定的每頁記錄數和當前要顯示的頁碼，傳送資料到伺服器進行查詢，然後再顯示到表格中。該方法可以根據使用者的需要動態的載入資料，節省了伺服器的資源，在進行查詢時，會發送一次的查詢請求到伺服器端進行查詢，根據伺服器端返回結果載入頁面。
相關依賴
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-table-zh-CN.js"></script>
bootstrap-table 使用
HTML程式碼：
<table id="myTable" class="table table-hover text-nowrap"></table>
json資料:
{
"message": "查詢成功",
"code": "200",
"data": [{
"id": "1",
"blogUrl": "https://www.sojson.com/",
"blogWorkName": "2",
}]
}
伺服器前端分頁JS程式碼載入表格內容：
$('#myTable').bootstrapTable({
method: 'post', //以post的方式傳送請求
url: url, //url地址，可以是介面也可以是本地json檔案
striped: true, // 是否顯示行間隔色
pageNumber: 1, // 初始化載入第一頁
pagination: true, // 是否分頁
sortable: true, //是否可排序
search: true, //是否可查詢
showColumns: true, //篩選要顯示的列
showSearchClearButton: true, //顯示搜尋清除按鈕
pageSize: 10, // 預設單頁記錄數
pageList: [10, 15, 20], //分頁可選頁數
sidePagination: "client", //表示客戶端請求
clickToSelect: true, //是否啟用點選選中行
//height: 500, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "id", //每一行的唯一標識，一般為主鍵列
showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕
cardView: false, //是否顯示詳細檢視
detailView: false, //是否顯示父子表
onLoadSuccess: function(){ //載入成功時執行
layer.msg("載入成功");
},
onLoadError: function(){ //載入失敗時執行
layer.msg("載入資料失敗", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax獲取到資料，渲染表格之前，修改資料來源
//該項返回的為資料來源內的二級列表data
if (res.code == "200"){
return res.data;
}else {
//顯示報錯資訊
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //換頁按鈕設定
paginationHAlign: 'left',
paginationDetailHAlign: 'right',
paginationPreText: '上一頁',
paginationNextText: '下一頁',
columns: [{
checkbox: true //左側複選框，用於多選操作
}, {
title: '部落格ID', //表頭名稱
field: 'id', //該列填充的資料
align: 'center', //資料內容居中
},{
title: '部落格連結',
field: 'blogUrl',
//列表顯示的是“原文連結”字樣的可點選連結
formatter: function (value, row, index) {
var result = "";
result += '<a style="color: #0a53be" href="'+value+'">原文連結</a>';
return result;
},
align: 'center',
}, {
title: '部落格名',
field: 'blogWorkName',
align: 'center',
}
]
});
樣式：
與客戶端分頁不同，伺服器端分頁需要設定分頁查詢的引數，sidePagination的值為server。
伺服器端分頁JS程式碼載入表格內容:
$('#myTable').bootstrapTable({
method: 'post', //以post的方式傳送請求
url: url, //url地址，可以是介面也可以是本地json檔案
striped: true, // 是否顯示行間隔色
pageNumber: 1, // 初始化載入第一頁
pagination: true, // 是否分頁
sortable: true, //是否可排序
search: true, //是否可查詢
showColumns: true, //篩選要顯示的列
showSearchClearButton: true, //顯示搜尋清除按鈕
pageSize: 10, // 預設單頁記錄數
pageList: [10, 15, 20], //分頁可選頁數
sidePagination: "server", //表示服務端請求
contentType: "application/x-www-form-urlencoded",//必須要有，請求資料格式
queryParamsType : "undefined", //設定請求資料型別
queryParams: function queryParams(params) { //設定請求資料
var param = {
pageNum: params.pageNumber, //伺服器端分頁所需要的的兩個引數
pageSize: params.pageSize,
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return param;
},
onLoadSuccess: function(){ //載入成功時執行
layer.msg("載入成功");
},
onLoadError: function(){ //載入失敗時執行
layer.msg("載入資料失敗", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax獲取到資料，渲染表格之前，修改資料來源
//該項返回的為資料來源內的二級列表data
if (res.code == "200"){
return res.data;
}else {
//顯示報錯資訊
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //換頁按鈕設定
paginationHAlign: 'left',
paginationDetailHAlign: 'right',
paginationPreText: '上一頁',
paginationNextText: '下一頁',
columns: [{
checkbox: true //左側複選框，用於多選操作
}, {
title: '部落格ID', //表頭名稱
field: 'id', //該列填充的資料
align: 'center', //資料內容居中
},{
title: '部落格連結',
field: 'blogUrl',
//列表顯示的是“原文連結”字樣的可點選連結
formatter: function (value, row, index) {
var result = "";
result += '<a style="color: #0a53be" href="'+value+'">原文連結</a>';
return result;
},
align: 'center',
}, {
title: '部落格名',
field: 'blogWorkName',
align: 'center',
}
]
});
當後端傳給前端的資料有著多重巢狀時，簡單的返回二級陣列中的資料顯然不能滿足我們的需求，我們可以對資料進行進一步處理，將所要的資料放在一個新建物件陣列中：
responseHandler:function(res){
if (res.code == "200"){
var userInfo = res.data;
var NewData = [];
if (userInfo.length){
for (var i = 0; i < userInfo.length; i++){
var dataNewObj = { //自己定義的一個物件，用於存放資料
"id": '',
"username": '',
"classId": '',
"score": '',
};
dataNewObj.id = userInfo[i].user.account;
dataNewObj.username = userInfo[i].user.userName;
dataNewObj.classId = userInfo[i].user.classRoom.className;
dataNewObj.score = userInfo[i].score.score;
NewData.push(dataNewObj); //將物件存到陣列中
}
}
var data = {
rows:NewData,
};
return data;
}else {
layer.msg(res.message, {time : 1500, icon : 2});
return false;
}
},