【轉載】BootStrap表格組件bootstrap table詳解

時間  2019-11-12
標籤 轉載 bootstrap 表格 組件 table 詳解 欄目 Bootstarp 简体版
原文   原文鏈接

（轉載，來源「腳本之家」，做者不詳）css

1、Bootstrap Table的引入html

關於Bootstrap Table的引入，通常來講仍是兩種方法：前端

一、直接下載源碼，添加到項目裏面來。
因爲Bootstrap Table是Bootstrap的一個組件，因此它是依賴Bootstrap的，咱們首先須要添加Bootstrap的引用。jquery

二、使用咱們神奇的Nuget
打開Nuget，搜索這兩個包bootstrap

Bootstrap已是最新的3.3.5了，咱們直接安裝便可。瀏覽器

而Bootstrap Table的版本居然是0.4，這也太坑爹了。因此博主建議Bootstrap Table的包就直接在源碼裏面去下載吧。Bootstrap Table最新的版本好像是1.9.0。緩存

2、代碼詳解
固然，組件引用進來了，使用就簡單了，只不過這裏面涉及不少細節須要咱們處理，具體咱們待會再說，先來看看使用方法。
一、在cshtml頁面引用相關組件，並定義好一個空的表格。
ide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@{
  Layout = null;
}
<!DOCTYPE html>
< html >
< head >
  < meta name = "viewport" content = "width=device-width" />
  < title >BootStrap Table使用</ title >
  @*一、Jquery組件引用*@
  < script src = "~/Scripts/jquery-1.10.2.js" ></ script >
 
  @*二、bootstrap組件引用*@
  < script src = "~/Content/bootstrap/bootstrap.js" ></ script >
  < link href = "~/Content/bootstrap/bootstrap.css" rel = "stylesheet" />
  
  @*三、bootstrap table組件以及中文包的引用*@
  < script src = "~/Content/bootstrap-table/bootstrap-table.js" ></ script >
  < link href = "~/Content/bootstrap-table/bootstrap-table.css" rel = "stylesheet" />
  < script src = "~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js" ></ script >
  
  @*四、頁面Js文件的引用*@
  < script src = "~/Scripts/Home/Index.js" ></ script >
</ head >
< body >
  < div class = "panel-body" style = "padding-bottom:0px;" >
  < div class = "panel panel-default" >
  < div class = "panel-heading" >查詢條件</ div >
  < div class = "panel-body" >
  < form id = "formSearch" class = "form-horizontal" >
  < div class = "form-group" style = "margin-top:15px" >
  < label class = "control-label col-sm-1" for = "txt_search_departmentname" >部門名稱</ label >
  < div class = "col-sm-3" >
  < input type = "text" class = "form-control" id = "txt_search_departmentname" >
  </ div >
  < label class = "control-label col-sm-1" for = "txt_search_statu" >狀態</ label >
  < div class = "col-sm-3" >
  < input type = "text" class = "form-control" id = "txt_search_statu" >
  </ div >
  < div class = "col-sm-4" style = "text-align:left;" >
  < button type = "button" style = "margin-left:50px" id = "btn_query" class = "btn btn-primary" >查詢</ button >
  </ div >
  </ div >
  </ form >
  </ div >
  </ div >
 
  < div id = "toolbar" class = "btn-group" >
  < button id = "btn_add" type = "button" class = "btn btn-default" >
  < span class = "glyphicon glyphicon-plus" aria-hidden = "true" ></ span >新增
  </ button >
  < button id = "btn_edit" type = "button" class = "btn btn-default" >
  < span class = "glyphicon glyphicon-pencil" aria-hidden = "true" ></ span >修改
  </ button >
  < button id = "btn_delete" type = "button" class = "btn btn-default" >
  < span class = "glyphicon glyphicon-remove" aria-hidden = "true" ></ span >刪除
  </ button >
  </ div >
  < table id = "tb_departments" ></ table >
  </ div >
</ body >
</ html >

引入須要的文件以後，咱們最重要的就是定義一個空的table，如上的  <table id="tb_departments"></table>  。固然Bootstrap table還提供了一種簡介的用法，直接在table標籤裏面定義相似「data-...」等相關屬性，就不用再js裏面註冊了，但博主以爲這種用法雖然簡單，但不太靈活，遇到父子表等這些高級用法的時候就不太好處理了，因此我們仍是統一使用在js裏面初始化的方式來使用table組件。
二、Js初始化
工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
$( 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: '/Home/GetDepartment' , //請求後臺的URL（*）
  method: 'get' , //請求方式（*）
  toolbar: '#toolbar' , //工具按鈕用哪一個容器
  striped: true , //是否顯示行間隔色
  cache: false , //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
  pagination: true , //是否顯示分頁（*）
  sortable: false , //是否啓用排序
  sortOrder: "asc" , //排序方式
  queryParams: oTableInit.queryParams, //傳遞參數（*）
  sidePagination: "server" , //分頁方式：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: false , //是否顯示父子表
  columns: [{
  checkbox: true
  }, {
  field: 'Name' ,
  title: '部門名稱'
  }, {
  field: 'ParentName' ,
  title: '上級部門'
  }, {
  field: 'Level' ,
  title: '部門級別'
  }, {
  field: 'Desc' ,
  title: '描述'
  }, ]
  });
  };
 
  //獲得查詢的參數
  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;
};

表格的初始化也很簡單，定義相關的參數便可。上面一些博主以爲重要的參數都加了註釋，而且初始化Table必須的幾個參數博主也用（*）作了標記，若是你的表格也有太多的頁面需求，直接用必須的參數就能解決。一樣，在columns參數裏面其實也有不少的參數須要設置，好比列的排序，對齊，寬度等等。這些博主以爲比較簡單，不會涉及表格的功能，看看API就能搞定。
三、在Controller裏面對應的方法
post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
{
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);
}

這裏有一點須要注意：若是是服務端分頁，返回的結果必須包含total、rows兩個參數。漏寫或錯寫都會致使表格沒法顯示數據。相反，若是是客戶端分頁，這裏要返回一個集合對象到前端。

四、效果及說明

 

仍是貼幾張效果圖出來：

3、問題小結

因爲是從零開始開發的以上功能，博主遇到一個問題能夠和園友們分享一下，這應該也是今天這篇想表達的重點。

一、上面說過，若是在js裏面初始化的參數sidePagination: "server" 設置爲在服務端分頁，那麼咱們的返回值必須告訴前端總記錄的條數和當前頁的記錄數，而後前端才知道如何分頁。而且最重要的一點，這兩個參數的名字必須爲total和rows。最開始也不知道這個，寫成了total和row，結果是請求能夠進到後臺的GetDepartment方法，返回值total和row也都有值，但是前端就是顯示以下：

找了好半天緣由。原來是row寫錯了，應該寫成rows。可能這也是前天園友遇到的問題的緣由。

二、第二個問題就是關於bootstrap頁面樣式的問題，咱們使用過bootstrap的朋友應該知道，它裏面全部的圖標都是經過class = "glyphicon glyphicon-plus"這種方式去寫的。按要求這樣作了，但是新增、修改、刪除前面的圖標怎麼都出不來。以下：

怎麼回事呢？而後各類百度，最後發現原來是fonts文件夾的問題。咱們在新建一個MVC項目的時候，會自動建立一個fonts文件夾，裏面內容以下：

而咱們的bootstrap.css是放在Content文件夾裏面的，這樣就致使找不到這些樣式文件。最終經過谷歌瀏覽器查看控制檯

原來它自動去Content裏面找fonts文件夾了。這下就好辦了，把咱們的fonts文件夾拷貝到Content下不就好了嗎。呵呵，原來真是這樣，問題順利解決。

三、關於中文。剛開始，沒有引用 <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> 這個包，因此界面找不到記錄是顯示的是英文，以下：

後來也是查資料瞭解到，bootstrap table裏面原來還有一箇中文包，把它添加進來就行了。

四、第四點要說說表格自帶的搜索功能，有上可知，在初始化表格的時候，經過設置search: true能夠設置表格的搜索框出現而且能夠進行模糊搜索。可是這個時候問題來了，咱們採用的是服務端分頁，每次返回到前臺的只有本頁的數據，這個時候咱們再搜索的時候發現：搜索不了。這是什麼緣由呢？博主在谷歌裏面調試bootstrap-table.js這個js發現裏面有這樣一段邏輯：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
BootstrapTable.prototype.onSearch = function (event) {
var text = $.trim($(event.currentTarget).val());
 
// trim search input
if ( this .options.trimOnSearch && $(event.currentTarget).val() !== text) {
$(event.currentTarget).val(text);
}
 
if (text === this .searchText) {
return ;
}
this .searchText = text;
 
this .options.pageNumber = 1;
this .initSearch();
this .updatePagination();
this .trigger( 'search' , text);
};
 
BootstrapTable.prototype.initSearch = function () {
var that = this ;
 
if ( this .options.sidePagination !== 'server' ) {
var s = this .searchText && this .searchText.toLowerCase();
var f = $.isEmptyObject( this .filterColumns) ? null : this .filterColumns;
 
// Check filter
this .data = f ? $.grep( this .options.data, function (item, i) {
for ( var key in f) {
if (item[key] !== f[key]) {
return false ;
}
}
return true ;
}) : this .options.data;
 
this .data = s ? $.grep( this .data, function (item, i) {
for ( var key in item) {
key = $.isNumeric(key) ? parseInt(key, 10) : key;
var value = item[key],
column = that.columns[getFieldIndex(that.columns, key)],
j = $.inArray(key, that.header.fields);
 
// Fix #142: search use formated data
if (column && column.searchFormatter) {
value = calculateObjectValue(column,
that.header.formatters[j], [value, item, i], value);
}
 
var index = $.inArray(key, that.header.fields);
if (index !== -1 && that.header.searchables[index] && ( typeof value === 'string' || typeof value === 'number' )) {
if (that.options.strictSearch) {
if ((value + '' ).toLowerCase() === s) {
return true ;
}
} else {
if ((value + '' ).toLowerCase().indexOf(s) !== -1) {
return true ;
}
}
}
}
return false ;
}) : this .data;
}
};

在initSearch方法裏面，它有一個判斷：if (this.options.sidePagination !== 'server') {......}也就是說，若是不是服務端分頁，才進入檢索，重寫加載表格，不然壓根就不會進入檢索，這也就是爲何服務分頁的時候，搜索會不起做用。博主試了下，換成客戶端分頁，確實能夠搜索。呵呵，原來如此。其實這也很好裏面，過濾本頁的數據，意義不大。
五、關於Bootstrap Table的排序，因爲通常這種BS系統確定會採用服務端分頁，咱們若是僅僅在js裏面設置sortable和sortOrder等屬性信息，表格是不會有效排序的。緣由很簡單，服務端分頁的方式，排序本頁數據意義不大。因此，通常的排序須要將排序方式和排序字段發送到後臺，在後臺排序比較合適。好比咱們這裏能夠再參數裏面增長兩個：

1
2
3
4
5
6
7
8
9
10
11
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;
  };

5、總結
在開發經歷中，也使用Jqgrid、EasyUI等表格組件。相比而言，bootstrap Table有本身的優點：

一、界面採用扁平化的風格，用戶體驗比較好，更好兼容各類客戶端。這點也是最重要的。

二、開源、免費。國人最喜歡的就是免費了。呵呵。

三、相對Jqgrid、easyUI而言，比較輕量級。功能不能說最全面，但基本夠用。

若是你們還想深刻學習，能夠點擊這裏進行學習，再爲你們附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程  Bootstrap Table使用教程

最近新補充的一系列bootstrap基礎教程，歡迎你們學習。

以上就是本文的所有內容，但願可以幫助你們更好的學習JS表格組件神器bootstrap table。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程