SpingBoot-Thymeleaf-bootstrapTable-分頁之H5
阿新 • • 發佈：2018-04-25
SpringBootH5
////查詢參數,每次調用是會帶上這個參數，可自定義
queryParams : queryParams,
search : false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch : true,
showColumns : true, //是否顯示所有的列
showRefresh : true, //是否顯示刷新按鈕
minimumCountColumns : 4, //最少允許的列數
responseHandler : responseHandler,
//clickToSelect: true, //是否啟用點擊選中行
uniqueId : "id", //每一行的唯一標識，一般為主鍵列
showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView : false, //是否顯示詳細視圖
detailView : false, //是否顯示父子表
columns : [
{
checkbox : true,
formatter: function (i,row) { // 每次加載 checkbox 時判斷當前 row 的 id 是否已經存在全局 Set() 裏
if($.inArray(row.id,overAllIds)!=-1){// 因為 判斷數組裏有沒有這個 id
return {
checked : true // 存在則選中
}
}
}
},
{
field : ‘id‘,
title : ‘ID‘,
visible : false
},
{
field: ‘avatar‘,
title: ‘頭像‘,
align: ‘center‘,
formatter: function(value,row,index){
var imgUrl=‘files/‘+row.avatar;
if(row.avatar==‘‘||row.avatar==null){imgUrl="/images/default.jpg";}
return ‘<img src=‘+imgUrl+‘ class="img-rounded" style="width:50px;height:50px;" >‘;
}
},
{
field : ‘loginName‘,
title : ‘登錄名稱‘
},
{
field : ‘userName‘,
title : ‘真實名稱‘
//初始化頁數
$(‘#userListTable‘)
.bootstrapTable(
{
url : ‘sys/user-list.json‘,
method : ‘post‘, //請求方式（）
dataType : ‘json‘,
contentType : "application/x-www-form-urlencoded",
showExport : true, //是否顯示導出按鈕
exportDataType : "all", //basic‘導出當前頁, ‘all‘導出全部, ‘selected‘導出選中項.
toolbar : ‘#toolbar‘, //工具按鈕用哪個容器 undefinedText : "-",//當數據為 undefined 時顯示的字符
striped : true, //是否顯示行間隔色
cache : false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（）
pagination : true, //是否顯示分頁（）
pageSize : 5, //每頁顯示的記錄數
pageNumber : 1, //當前第幾頁
pageList : [5,10, 15, 20, 25 ], //記錄數可選列表
sortable : false, //是否啟用排序
sortOrder : "asc", //排序方式
sidePagination : "server", //分頁方式：client客戶端分頁，server服務端分頁（
////查詢參數,每次調用是會帶上這個參數，可自定義
queryParams : queryParams,
search : false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch : true,
showColumns : true, //是否顯示所有的列
showRefresh : true, //是否顯示刷新按鈕
minimumCountColumns : 4, //最少允許的列數
responseHandler : responseHandler,
//clickToSelect: true, //是否啟用點擊選中行
uniqueId : "id", //每一行的唯一標識，一般為主鍵列
showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView : false, //是否顯示詳細視圖
detailView : false, //是否顯示父子表
columns : [
{
checkbox : true,
formatter: function (i,row) { // 每次加載 checkbox 時判斷當前 row 的 id 是否已經存在全局 Set() 裏
if($.inArray(row.id,overAllIds)!=-1){// 因為 判斷數組裏有沒有這個 id
return {
checked : true // 存在則選中
}
}
}
},
{
field : ‘id‘,
title : ‘ID‘,
visible : false
},
{
field: ‘avatar‘,
title: ‘頭像‘,
align: ‘center‘,
formatter: function(value,row,index){
var imgUrl=‘files/‘+row.avatar;
if(row.avatar==‘‘||row.avatar==null){imgUrl="/images/default.jpg";}
return ‘<img src=‘+imgUrl+‘ class="img-rounded" style="width:50px;height:50px;" >‘;
}
},
{
field : ‘loginName‘,
title : ‘登錄名稱‘
},
{
field : ‘userName‘,
title : ‘真實名稱‘
},
{
field : ‘email‘,
title : ‘郵箱‘
},
{
field : ‘phoneNum‘,
title : ‘電話‘
},
{
title : ‘操 作‘,
field : ‘id‘,
align : ‘center‘,
formatter : function(value, row, index) {
var id = row.id;
var e;
e = ‘<a href ="#" title="編輯"><span class="fa fa-wrench" onclick="editUser(\‘‘
+ id
+ ‘\‘)"> </span></a>??‘
+ ‘<a href ="#" title="註銷"><span class="fa fa-lock" aria-hidden="true" onclick="disableUser(\‘‘
+ id
+ ‘\‘)"> </span></a>??‘
+ ‘<a href ="#" title="刪除"><span class="fa fa-times" onclick="deleteUser(\‘‘
+ id
+ ‘\‘)"> </span></a>??‘
+ ‘<a href ="#" title="修改密碼"><span class="fa fa-key" onclick="modifyPassword(\‘‘
+ id
+ ‘\‘)"> </span></a>??‘
+ ‘<a href ="#" title="上傳頭像"><span class="fa fa-user" onclick="uploadAvatar(\‘‘
+ id+‘\‘)"> </span></a>‘;
return e;
},
events : ‘operateEvents‘
} ]
});
//為翻頁保留checkbox選中準備
$(‘#userListTable‘).on(‘uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table‘,function(e,rows){
var datas = $.isArray(rows) ? rows : [rows]; // 點擊時獲取選中的行或取消選中的行
examine(e.type,datas); // 保存到全局 Array() 裏
});
//訪問成功回調函數
function responseHandler(res) {
//console.log(res);
if (res) {
return {
"rows" : res.list,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
};SpingBoot-Thymeleaf-bootstrapTable-分頁之H5