做後臺管理系統的時候，最常見的就是把數據以表格形式展示。在SpringBoot分頁中已經記錄相關的後端分頁操作。而前端的展示用的是Bootstrap-table。
1、引入js和css文件
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script src="./js/bootstrap-editable.min.js" type="text/javascript"></script>
<script src="./js/bootstrap-table-editable.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/bootstrap-table.min.css" rel="stylesheet">
<link href="./css/bootstrap-editable.css" rel=“ stylesheet”>
<link href="./js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
editable相關的是用於實現行內編輯的。
2、html代碼
<table id="table-user"></table>
只需要在body中編寫一行代碼。
3、初始化表格
var UserTableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table-user').bootstrapTable({
url: '', //請求後臺的URL（*），獲取數據
method: 'get', //請求方式（*）
contentType: 'application/json',
queryParams: oTableInit.queryParams,//請求攜帶的參數
ajaxOptions: {
headers: {
"Authentication": localStorage.getItem("token")
}
},
onLoadSuccess: function (data) {
//請求成功
console.log(data);
},
onLoadError: function (status, jqXHR) {
//請求失敗
},
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
queryParamsType: "",
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: false, //是否顯示錶格搜索
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啓用點擊選中行
height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "userId", //每一行的唯一標識，一般爲主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
rowStyle: 'rowStyle', //行內樣式
onEditableSave: function (field, row, oldValue, $el) {
//行內編輯函數，對應後端的修改接口
$.ajax({
type: "post",
url: "",
data: JSON.stringify(row),
contentType: 'application/json',
dataType: 'JSON',
headers: {
"Authentication": localStorage.getItem("token")
},
success: function (data, status) {
},
error: function () {
},
complete: function () {
}
});
},
//表格顯示的字段和列名，字段對應的是返回數據中的變量名
columns: [{
checkbox: true
}, {
field: 'cardId',
title: '學號'
}, {
field: 'userName',
title: '姓名'
}, {
field: 'college',
title: '學院'
}, {
field: 'phoneNum',
title: '手機號碼',
//行內編輯
editable: {
type: 'text',
title: '手機號碼',
validate: function (v) {
if (isNaN(v)) return '手機號碼必須是數字';
}
}
}, {
field: 'insertTime',
title: '註冊時間'
}, {
field: 'status',
title: '狀態',
//下拉形式的行內編輯
editable: {
type: 'select',
title: '狀態',
source: [{value: 1, text: "正常"}, {value: 2, text: "封禁"}]
}
}, {
field: 'action',
title: '操作',
width: 100,
events: 'operateEvents',
//表格末端的操作
formatter: actionFormatter, //自定義表格內容，字符串內是方法名稱
}]
});
};
//得到查詢的參數
oTableInit.queryParams = function (params) {
var temp = {
pageSize: params.pageSize, //頁面大小
currPage: params.pageNumber, //頁碼
};
return temp;
};
return oTableInit;
};
// 單元格，自定義設置
// 操作按鈕
function actionFormatter(value, row, index) {
var id = index;
var result = "";
result += "<a href='javascript:void(0);' class='btn btn-xs blue' οnclick=\"searchUserInfoList('" + row + "','" + index + "')\" data-toggle=\"tooltip\" title='查看相關'><i class='mdi mdi-search-web'></i></a>";
result += "<a href='javascript:void(0);' class='btn btn-xs red' οnclick=\"DeleteByUserId('" + row + "','" + index + "')\" data-toggle=\"tooltip\" title='刪除'><i class='mdi mdi-window-close'></i></a>";
return result;
}
注意的是服務器返回的數據格式應該是
{
total:10,//數據總數
rows:[//對象列表
{
},
{
}
]
}
4、頁面初始化
function onload() {
//1.初始化Table
var oTable = new UserTableInit();
oTable.Init();
};
<body οnlοad="onload()">
</body>
按鈕爲自己新增的。
關於css和js等相關文件可以到bootstrap-table官網下載。
關於bootstrap-table中的字段，可以到bootstrap-table文檔查看。
參考的文章：