288
Bootstrap Table筆記——1
Spring Boot + Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title>
<!--Jquery組件引用-->
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<!--bootstrap組件引用-->
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<!--bootstrap table組件以及中文包的引用-->
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<!--頁麵js文件的引用-->
<script type="text/javascript" src="js/main.js"></script>
<!--bootstrap table editable組件引用-->
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
</head>
<body>
<div >
<div >
<div >查詢條件</div>
<div >
<form >
<div >
<label for="txt_search_departmentname">部門名稱</label>
<div >
<input type="text" >
</div>
<label for="txt_search_statu">狀態</label>
<div >
<input type="text" >
</div>
<div >
<button type="button" >查詢</button>
</div>
</div>
</form>
</div>
</div>
<div >
<button type="button" data-toggle="modal" data-target="#insertModal">
<span aria-hidden="true"></span>新增
</button>
<button type="button" >
<span aria-hidden="true"></span>修改
</button>
<button type="button" >
<span aria-hidden="true"></span>刪除
</button>
</div>
<!-- 模態框（Modal） -->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div >
<div >
<div >
<button type="button" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 >
添加商品
</h4>
</div>
<div >
<select >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div >
<button type="button" data-dismiss="modal">
關閉
</button>
<button type="button" data-dismiss="modal">
確認
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<table ></table>
</div>
</body>
<script type="text/javascript">
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的點擊事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/girl/l', //請求後台的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: false, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //傳遞參數（*）
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
//height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: true, //是否顯示父子表
columns: [{
checkbox: true
}, {
field: 'id',
title: 'ID',
align: 'center',
valign: 'middle'
}, {
field: 'age',
title: 'AGE',
align: 'center',
valign: 'middle'
}, {
field: 'cupSize',
title: 'CupSize',
align: 'center',
valign: 'middle'
}, ]
});
};
//得到查詢的參數
oTableInit.queryParams = function (params) {
var temp = { //這裏的鍵的名字和控製器的變量名必須一直，這邊改動，控製器也需要改成一樣的
limit: params.limit, //頁麵大小
offset: params.offset, //頁碼
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁麵上麵的按鈕事件
};
return oInit;
};
</script>
</html>
問題小結：
1.如果在js裏麵初始化的參數 sidePagination: "server" 設置為在服務端分頁，那麼我們的返回值必須告訴前端總記錄的條數和當前頁的記錄數，然後前端才知道如何分頁。並且最重要的一點，這兩個參數的名字必須為total和rows。
2、第二個問題就是關於bootstrap頁麵樣式的問題，我們使用過bootstrap的朋友應該知道，它裏麵所有的圖標都是通過class = "glyphicon glyphicon-plus"這種方式去寫的。博主按要求這樣做了，可是新增、修改、刪除前麵的圖標怎麼都出不來。
原因：找不到fonts文件夾。把fonts文件夾拷貝到目錄下就行了（如截圖）。
3、關於中文。剛開始，博主沒有引用 <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> 這個包，所以界麵找不到記錄是顯示的是英文。
4、表格自帶的搜索功能，有上可知，在初始化表格的時候，通過設置search: true可以設置表格的搜索框出現並且可以進行模煳搜索。之前博主一直以為隻有客戶端分頁才能使用這個搜索，多謝園友指出，其實服務端分頁也可以使用這個搜索功能。隻不過需要在對應的方法裏加上search參數。比如
oTableInit.queryParams = function (params) {
var temp = { //這裏的鍵的名字和控製器的變量名必須一直，這邊改動，控製器也需要改成一樣的
limit: params.limit, //頁麵大小
offset: params.offset, //頁碼
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val(),
search:params.search
};
return temp;
};然後後端
public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu, string search) {
var lstRes = new List<Department>();
for (var i = 0; i < 50; i++)
{
var oModel = new Department();
oModel.ID = Guid.NewGuid().ToString();
oModel.Name = "銷售部" + i ;
oModel.Level = i.ToString();
oModel.Desc = "暫無描述信息";
lstRes.Add(oModel);
}
var total = lstRes.Count;
var rows = lstRes.Skip(offset).Take(limit).ToList();
return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}這樣，每次用戶在搜索框裏麵輸入都會進到後台的方法，並且將用戶輸入的值傳到search參數。但是如果你需要對多個字段進行模煳匹配，那麼就意味著你的後台需要去對多個數據字段進行like操作，這樣查詢效率肯定低下。所以，如果需要模煳匹配的字段很多，這個search在實際項目中是用不上的。綜上，博主還是覺得隻有在客戶端分頁的時候，這個搜索的作用比較明顯。
5、關於Bootstrap Table的排序，由於一般這種BS係統肯定會采用服務端分頁，我們如果僅僅在js裏麵設置sortable和sortOrder等屬性信息，表格是不會有效排序的。原因很簡單，服務端分頁的方式，排序本頁數據意義不大。所以，一般的排序需要將排序方式和排序字段發送到後台，在後台排序比較合適。比如我們這裏可以再參數裏麵增加兩個：
oTableInit.queryParams = function (params) {
var temp = { //這裏的鍵的名字和控製器的變量名必須一直，這邊改動，控製器也需要改成一樣的
limit: params.limit, //頁麵大小
offset: params.offset, //頁碼
order: params.order,
ordername: params.sort,
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
}最後更新：2017-06-30 15:31:50