【轉載收藏】表格組件神器：bootstrap table詳細使用指南
一、bootstrap-table簡介css
- 1.一、bootstrap table簡介及特徵：
Bootstrap table是國人開發的一款基於 Bootstrap 的 jQuery 表格插件，經過簡單的設置，就能夠擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。目前在github上已經有2600多個Star，可見其受歡迎程度。其官方網站地址 爲：http://bootstrap-table.wenzhixin.net.cn/。裏面能夠下載使用所需的JS和CSS文件，以及參考文檔和例子。html
- 支持 Bootstrap 3 和 Bootstrap 2
- 自適應界面
- 固定表頭
- 很是豐富的配置參數
- 直接經過標籤使用
- 顯示/隱藏列
- 顯示/隱藏表頭
- 經過 AJAX 獲取 JSON 格式的數據
- 支持排序
- 格式化表格
- 支持單選或者多選
- 強大的分頁功能
- 支持卡片視圖
- 支持多語言
- 支持插件
- 1.二、bootstrap table渲染數據到表格的方式：
Bootstrap-Table顯示數據到表格的方式有兩種，一種是客戶端（client）模式，一種是服務器（server）模式。
所謂客戶端模式，指的是在服務器中把要顯示到表格的數據一次性加載出來，而後轉換成JSON格式傳到要顯示的界面中，在JavaWeb中能夠保存在request中，而後轉發到指定界面，在界面初始化的時候使用EL表達式獲取，而後調用相關初始化的函數，將JSON字符串傳進去便可顯示。客戶端模式較爲簡單，它是把數據一次性加載出來放到界面上，而後根據你設置的每頁記錄數，自動生成分頁。當點擊第二頁時，會自動加載出數據，不會再向服務器發送請求。同時用戶可使用其自帶的搜索功能，能夠實現全局數據搜索。對於數據量較少的時候，可使用這個方法。可是對於數據量大的系統，使用該方法會形成加載出一些好久以前的，用戶不在關注的數據，使得加載速度變慢，增長了服務器的負擔，浪費了資源。這時應該採用服務器模式。
所謂服務器模式，指的是根據設定的每頁記錄數和當前要顯示的頁碼，發送數據到服務器進行查詢，而後再顯示到表格中。該方法能夠根據用戶的須要動態的加載數據，節省了服務器的資源，可是不能使用其自帶的全數據搜索功能。由於你加載的數據只是一頁的數據，因此全數據搜索的範圍也只在一頁之中。
客戶端模式較爲簡單，讀者可根據官方文檔和例子自行實踐。這裏主要介紹服務器模式，並能夠實現帶參數的查詢。前端
二、bootstrap-table的引入jquery
關於Bootstrap Table的引入，通常來講仍是兩種方法：
2.一、直接使用免費且穩定的cdn服務：
如：Bootstrap中文網開源項目免費 CDN 服務，搜索本身所須要的較穩定的版本。git
- 首先，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入，目前使用穩定版本jquery.1.12.1.js.
- 其次，Bootstrap Table是Bootstrap的一個組件，因此它是依賴Bootstrap的，咱們首先須要添加Bootstrap的引用。直接在搜索框中搜索bootstrap,版本已經出來4的預覽版，但仍是建議使用比較穩定的Bootstrap3，目前最新的3.3.5。
- 最後，就是Bootstrap Table的包了，直接在搜索框中搜索bootstrap-table,目前較好的版本爲1.11.1，或者咱們直接進到它的源碼git clone https://github.com/wenzhixin/bootstrap-table,下載下來放到項目中便可。
2.二、使用visual studio自帶的包管理工具：Nuget
NuGet的官方說明是：NuGet是一款Visual Studio的擴展，它能夠簡單的安裝、升級開源庫和工具。
官網地址：http://www.nuget.org/
從官網下載安裝完成以後，就能夠在vs中使用了。使用方法以下：
右鍵點擊解決方案，如圖：github
選擇 「管理解決方案的NuGet的程序包」，出現如圖：ajax
依次搜索jquery ,bootstrap,bootstrap-table等放入本地文件夾。若是發現裏面的版本較低，可使用Bootstrap中文網開源項目免費 CDN 服務，獲取最新的版本。json
三、代碼詳解bootstrap
3.一、在html頁面引用相關組件，並定義好一個空的表格。api
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta http-equiv=
"Cache-Control"
content=
"no-cache"
>
<title>登陸信息</title>
<!-- 一、Jquery組件引用-->
<script src=
"../js/jquery.min.js?v=1.11.2"
></script>
<!-- 二、bootstrap組件引用-->
<link href=
"../css/bootstrap.min.css?v=3.3.6"
rel=
"stylesheet"
>
<script src=
"../js/bootstrap.min.js?v=3.3.6"
></script>
<!-- 三、bootstrap-table組件引用-->
<link href=
"../css/plugins/bootstrap-table/bootstrap-table.min.css?v=1.11.1"
rel=
"stylesheet"
/>
<script src=
"../js/plugins/bootstrap-table/bootstrap-table.min.js?v1.11.0"
></script>
<script src=
"../js/plugins/bootstrap-table/bootstrap-table-zh-CN.js?v1.11.0"
></script><!--顯示中文-->
<!-- 四、其餘-->
<link href=
"../css/font-awesome.min.css"
rel=
"stylesheet"
/>
<link href=
"../css/style.min.css?v=4.1.0"
rel=
"stylesheet"
>
<link href=
"../css/customer_info.css?v=4.1.0"
rel=
"stylesheet"
/>
<script src=
"../js/plugins/layer/laydate/laydate.js"
></script>
<script src=
"../js/customer_info.js"
></script>
</head>
<body
class
=
"gray-bg"
>
<div
class
=
"wrapper wrapper-content"
id=
"userLogin"
>
<div id=
"dateSearch"
>
<span><strong>開始日期: </strong></span>
<input type=
"text"
class
=
"laydate-icon startDate"
placeholder=
"開始日期"
>
<span><strong>結束日期: </strong></span>
<input type=
"text"
class
=
"laydate-icon endDate"
placeholder=
"結束日期"
>
<span><strong>用戶ID: </strong></span>
<input type=
"text"
class
=
"default-input form-control imuserid"
placeholder=
"請輸入用戶id"
>
<button type=
"button"
class
=
"btn btn btn-info search"
> <i
class
=
"fa fa-search"
></i> 搜索</button>
</div>
<div
class
=
"row"
id=
"infoArea"
>
<div
class
=
"col-sm-12"
style=
"padding: 0 10px;"
>
<ul
class
=
"nav nav-tabs"
id=
"navList"
>
<li data-name =
"loginLogTab"
class
=
"active"
><a data-toggle=
"tab"
href=
"#loginLogTab"
><i
class
=
"fa fa-user"
></i>登陸信息</a> </li>
<li data-name =
"receiveLogTab"
class
=
""
><a data-toggle=
"tab"
href=
"#receiveLogTab"
><i
class
=
"fa fa-briefcase"
></i> 訂購信息</a> </li>
<li data-name =
"socketInputTab"
class
=
""
><a data-toggle=
"tab"
href=
"#socketInputTab"
><i
class
=
"fa fa-briefcase"
></i> 反饋信息</a> </li>
<li data-name =
"socketOutputTab"
class
=
""
><a data-toggle=
"tab"
href=
"#socketOutputTab"
><i
class
=
"fa fa-briefcase"
></i> 出行信息</a> </li>
</ul>
<div
class
=
"tab-content"
id=
"tabContent"
>
<div id=
"toolbar"
class
=
"btn-group"
>
<button id=
"btn_add"
type=
"button"
class
=
"btn btn-info btn-sm rightSize"
>
<span
class
=
"glyphicon glyphicon-plus"
aria-hidden=
"true"
></span>新增
</button>
<button id=
"btn_edit"
type=
"button"
class
=
"btn btn-info btn-sm rightSize"
>
<span
class
=
"glyphicon glyphicon-pencil"
aria-hidden=
"true"
></span>修改
</button>
<button id=
"btn_delete"
type=
"button"
class
=
"btn btn-info btn-sm rightSize"
>
<span
class
=
"glyphicon glyphicon-remove"
aria-hidden=
"true"
></span>刪除
</button>
</div>
<div id=
"loginLogTab"
class
=
"tab-pane active"
>
<div
class
=
"table-responsive"
>
<table id=
"loginLog-table"
></table>
</div>
</div>
<div id=
"receiveLogTab"
class
=
"tab-pane"
>
<div
class
=
"table-responsive"
>
<table id=
"receiveLog-table"
></table>
</div>
</div>
<div id=
"socketInputTab"
class
=
"tab-pane"
>
<div
class
=
"table-responsive"
>
<table id=
"sockctInput-table"
></table>
</div>
</div>
<div id=
"socketOutputTab"
class
=
"tab-pane"
>
<div
class
=
"table-responsive"
>
<table id=
"sockctOutput-table"
></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
引入須要的文件以後，咱們最重要的就是定義一個空的table，如上的 <table id="loginLog-table"></table>。
固然Bootstrap table還提供了另外兩種簡單的用法，直接經過$table.bootstrapTable({data: data})，具體參考form-data.html;
或者直接在table標籤裏面定義 <table data-toggle="table" data-url="../json/data1.json">,相似「data-...」等相關屬性，具體參考table-style.html;這兩種方法都不用在js裏面註冊就能夠實現數據的加載，
但博主以爲這種用法雖然簡單，但不太靈活，因此我們仍是統一使用在js裏面初始化的方式來使用table組件。
3.二、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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
var
queryParams = function (
params
) {
var
param = {
pageIndex: Math.ceil(
params
.offset /
params
.limit) + 1,
pageSize:
params
.limit,
order:
params
.order,
ordername:
params
.sort,
startDateTime: $(
"#dateSearch .startDate"
).val(),
endDateTime: $(
"#dateSearch .endDate"
).val(),
search: $(
"#dateSearch .imuserid"
).val()
};
return
param;
}
var
responseHandler = function (e) {
console.log(e);
if
(e.data && e.data.length > 0) {
return
{
"rows"
: e.data,
"total"
: e.count };
}
else
{
return
{
"rows"
: [],
"total"
: 0 };
}
}
var
uidHandle = function (res) {
var
html =
"<a href='#'>"
+ res +
"</a>"
;
return
html;
}
var
operateFormatter = function (value, row, index) {
//賦予的參數
return
[
'<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><i class="fa fa-paste"></i> 詳情</button>'
,
'<button class="btn btn-danger btn-sm rightSize packageBtn" type="button"><i class="fa fa-envelope"></i> 通知</button>'
].
join
(
''
);
}
self.dataInit = function (name) {
var
url, columns, tableName;
switch
(name) {
case
'loginLogTab'
:
tableName =
"loginLog-table"
;
columns = [
{
checkbox:
true
},
{
field:
'uid'
,
title:
'用戶編號'
,
align:
'center'
,
formatter: uidHandle,
//自定義方法設置uid跳轉連接
width:300
}, {
field:
'name'
,
title:
'姓名'
,
align:
'center'
,
sortable:
false
//本列不能夠排序
}, {
field:
'sex'
,
title:
'性別'
,
align:
'center'
}, {
field:
'age'
,
title:
'年齡'
,
align:
'center'
,
sortable:
true
,
clickToSelect:
false
,
sortName:
"age"
,
order:
"asc"
}, {
field:
'area'
,
title:
'戶籍所在地'
,
align:
'left'
,
halign:
'center'
//設置表頭列居中對齊
}, {
field:
'loginWay'
,
title:
'登陸方式'
,
align:
'center'
}, {
field:
'status'
,
title:
'狀態'
,
align:
'center'
},{
field:
'createTime'
,
title:
'登陸時間'
,
align:
'center'
,
width: 90
}, {
field:
'orderService'
,
title:
'購買服務'
,
align:
'center'
}, {
field:
'connectorIP'
,
title:
'鏈接器IP'
,
align:
'center'
}, {
field:
'connectorPort'
,
title:
'鏈接器端口'
,
align:
'center'
}, {
field:
'operate'
,
title:
'操做'
,
align:
'center'
,
valign:
'middle'
,
formatter: operateFormatter
//自定義方法，添加操做按鈕
}
];
break
;
case
'receiveLogTab'
:
//省略
break
;
case
'socketInputTab'
:
//省略
break
;
case
'socketOutputTab'
:
//省略
break
;
}
$(
'#'
+ tableName).empty();
$(
'#'
+ tableName).bootstrapTable(
'destroy'
).bootstrapTable({
url:
'../data/login_info2.json'
,
//url通常是請求後臺的url地址,調用ajax獲取數據。此處我用本地的json數據來填充表格。
method:
"get"
,
//使用get請求到服務器獲取數據
dataType:
"json"
,
contentType:
'application/json,charset=utf-8'
,
toolbar:
"#toolbar"
,
//一個jQuery 選擇器，指明自定義的toolbar 例如:#toolbar, .toolbar.
uniqueId:
"id"
,
//每一行的惟一標識，通常爲主鍵列
height: document.body.clientHeight-165,
//動態獲取高度值，可使表格自適應頁面
cache:
false
,
// 不緩存
striped:
true
,
// 隔行加亮
queryParamsType:
"limit"
,
//設置爲"undefined",能夠獲取pageNumber，pageSize，searchText，sortName，sortOrder
//設置爲"limit",符合 RESTFul 格式的參數,能夠獲取limit, offset, search, sort, order
queryParams: queryParams,
sidePagination:
"server"
,
//分頁方式：client客戶端分頁，server服務端分頁（*）
// sortable: true, //是否啓用排序;意味着整個表格都會排序
sortName:
'uid'
,
// 設置默認排序爲 name
sortOrder:
"asc"
,
//排序方式
pagination:
true
,
//是否顯示分頁（*）
search:
true
,
//是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
strictSearch:
true
,
showColumns:
true
,
//是否顯示全部的列
showRefresh:
true
,
//是否顯示刷新按鈕
showToggle:
true
,
//是否顯示詳細視圖和列表視圖
clickToSelect:
true
,
//是否啓用點擊選中行
minimumCountColumns: 2,
//最少容許的列數 clickToSelect: true, //是否啓用點擊選中行
pageNumber: 1,
//初始化加載第一頁，默認第一頁
pageSize: 10,
//每頁的記錄行數（*）
pageList: [10, 25, 50, 100],
//可供選擇的每頁的行數（*）
paginationPreText:
"Previous"
,
paginationNextText:
"Next"
,
paginationFirstText:
"First"
,
paginationLastText:
"Last"
,
responseHandler: responseHandler,
columns: columns,
onLoadSuccess: function (data) {
//加載成功時執行
console.log(data);
},
onLoadError: function (res) {
//加載失敗時執行
console.log(res);
}
});
}
|
表格的初始化也很簡單，定義相關的參數便可。上面一些博主以爲重要的參數都加了註釋，若是你的表格也有太多的頁面需求，直接用必須的參數就能解決。
一樣，在columns參數裏面其實也有不少的參數須要設置，好比列的排序，對齊，寬度等等。這些博主以爲比較簡單，不會涉及表格的功能，看看API就能搞定。
3.三、頁面效果圖展現：
四、其餘經常使用且高級功能
4.一、實現表格奇偶行，背景顏色隔行顯示;
單一的表格數據顯示，看上去有些單調。經過設置表格奇偶行背景顏色隔行顯示，會讓表格更加生動。實際應用中常常會遇到。實現方法經過添加列方法,如圖：
var rowStyle = function (row, index) {
var classes = ['success', 'info'];
if (index % 2 === 0) {//偶數行
return { classes: classes[0]};
} else {//奇數行
return {classes: classes[1]};
}
}
效果如圖：
4.二、實現表格行列合併;
表格的行列合併功能不用引用其餘的js文件，只須要在html頁面使用table的colspan和rowspan便可實現。
|
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
|
<table id=
"receiveLogs-table"
class
=
"table table-hover"
data-pagination=
"true"
data-show-refresh=
"false"
data-show-toggle=
"false"
data-showColumns=
"false"
data-toggle=
"table"
data-row-style=
"rowStyle"
<strong>data-url=
"../data/login_info.json"
</strong>>
<thead>
<tr>
<th colspan=
"5"
data-valign=
"middle"
data-halign=
"center"
>用戶基本信息</th>
<th colspan=
"6"
data-valign=
"middle"
data-halign=
"center"
>用戶購買信息</th>
<th rowspan=
"2"
data-field=
"operate"
data-valign=
"middle"
data-halign=
"center"
data-formatter=
"operateFormatter"
>操做</th>
</tr>
<tr>
<th data-field=
"uid"
data-align=
"center"
data-formatter=
"setCode"
>用戶編號</th>
<th data-field=
"name"
data-align=
"center"
>姓名</th>
<th data-field=
"sex"
data-align=
"center"
>性別</th>
<th data-field=
"age"
data-align=
"center"
data-sortable=
"true"
>年齡</th>
<th data-field=
"area"
data-align=
"center"
>戶籍所在地</th>
<th data-field=
"loginWay"
data-align=
"center"
>登陸方式</th>
<th data-field=
"status"
data-align=
"center"
>狀態</th>
<th data-field=
"createTime"
data-align=
"center"
>登陸時間</th>
<th data-field=
"orderService"
data-align=
"center"
>購買服務</th>
<th data-field=
"connectorIP"
data-align=
"center"
>鏈接器IP</th>
<th data-field=
"connectorPort"
data-align=
"center"
>鏈接器端口</th>
</tr>
</thead>
</table>
|
要添加操做按鈕和奇偶行背景顏色隔行顯示，須要添加相應的js方法，以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function operateFormatter(value, row, index) {
//賦予的參數
return
[
'<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><i class="fa fa-paste"></i> 詳情</button>'
,
'<button class="btn btn-danger btn-sm rightSize packageBtn" type="button"><i class="fa fa-envelope"></i> 通知</button>'
].
join
(
''
);
}
var
rowStyle = function (row, index) {
var
classesArr = [
'success'
,
'info'
];
if
(index % 2 === 0) {
//偶數行
return
{ classes: classesArr[0] };
}
else
{
//奇數行
return
{ classes: classesArr[1] };
}
}
window.operateFormatter = operateFormatter;
window.rowStyle = rowStyle;
|
效果如圖：
五、遇到的問題及解決方法
5.一、當請求返回的數據結果不是固定的「total」,"rows"的格式時，如何渲染表格數據？
咱們運用$('#' + tableName).bootstrapTable({ url: '../data/login_info.json'}),請求json數據，必需要求json數據格式爲固定的key值，即必須按照「total」,"rows"的格式才能填充數據到表格，如圖所示：
可是，當接口返回的數據格式，不是固定的「total」,"rows"時，咱們須要用到一個轉換函數responseHandler，將數據指引到「total」,"rows"上去。
即用login_info2.json和參數responseHandler實現數據填充。
login_info2.json的數據格式，如圖：
添加的responseHandler的方法，如圖：
將返回結果經過方法引導，也能實現數據的填充。
5.二、Bootstrap Table自帶的搜索功能，在服務器模式和客戶端模式的應用說明：
因爲實際應用中，通常請求服務端，返回的數據會不少，因此通常都會用服務器模式加載數據。故經過 search: true顯示的內部模糊匹配功能不經常使用。固然服務器模式加載的數據也能夠實現搜索功能，即將數據傳入後臺，後臺處理以後返回前端。
可是若是你須要對多個字段進行模糊匹配，那麼就意味着你的後臺須要去對多個數據字段進行like操做，這樣查詢效率確定低下。因此，若是須要模糊匹配的字段不少，這個search在實際項目中是用不上的。綜上，博主仍是以爲只有在客戶端分頁的時候，這個搜索的做用比較明顯。
var queryParams = function (params) {
var param = {
pageIndex: Math.ceil(params.offset / params.limit) + 1,
pageSize: params.limit,
search:$("#dateSearch .imuserid").val()
};
return param;
}
5.三、Bootstrap Table的排序，在服務器模式和客戶端模式的應用說明：
5.3.一、添加排序字段order和ordername給後臺，實現服務端排序；
在客戶端模式時，排序功能有效。在服務器模式下，經過 sortable: true所設置的排序功能沒法使用，服務器模式要實現排序功能，須要添加排序字段order和ordername給後臺，後臺處理以後返回前端。
var queryParams = function (params) {
var param = {
pageIndex: Math.ceil(params.offset / params.limit) + 1,
pageSize: params.limit,
order: params.order,
ordername: params.sort
};
return param;
}
5.3.二、使用ajax調用接口獲取數據，再經過$('#tableName').bootstrapTable({ data: data})的方式，實現客戶端排序；
同時，注意onSort方法的使用。
代碼以下：
tableName = "sockctInput-table";
$.ajax({
url: '../data/login_info2.json',
method: 'get',
dataType: 'json',
contentType: "application/json",
success: function(res) {
console.log(res);
$('#' + tableName).bootstrapTable('destroy').bootstrapTable({
data: res.data,
toolbar: "#toolbar",
uniqueId: "id",
height: document.body.clientHeight - 205,
cache: false,
striped: true,
sortOrder: 'asc',
sortStable: false,
columns: columns,
onSort: function (a, b) { //點擊排序時觸發
$(".fixed-table-header").removeClass('hidden');
return a - b;
},
onLoadSuccess: function (data) { //加載成功時執行
alert(1);
console.log(data);
},
onLoadError: function (res) { //加載失敗時執行
console.log(res);
}
});
$(".fixed-table-header").addClass('hidden');
return;
},
error: function(res) {
console.log(res);
}
});
效果如圖：根據年齡由小到大進行排序
5.四、關於經過「get」方式請求本地.json文件時出現中文亂碼的問題：
在請求本地login_info2.json數據時，請求方式method:'get',設置爲「post」時，出現「405」報錯；同時，我發現從json文件請求的數據，返回到頁面時，出現中文亂碼的狀況；可是頁面上已經設置了<meta charset="utf-8">，同時ajax請求時，也設置了內容返回的字符編碼：contentType: 'application/json,charset=utf-8',但仍是出現亂碼，通過網上查找，找到解決方法是：
記事本打開json文件，另存爲，將編碼選擇爲utf-8，存儲替換原來的文件就好了。如圖：
5.五、運用bootstrap-table,url請求數據，添加請求頭部信息方法：
須要添加ajaxOptions參數，如圖：
var userId = cmsdk.getCookie('userID');
var token = cmsdk.getCookie('token');
$('#'+tableName).bootstrapTable('destroy').bootstrapTable({
url: url,
method: "post", //使用get請求到服務器獲取數據
ajaxOptions:{
headers: {"userID": userId,"token": token}
}
}
添加之後，在瀏覽器端的查看狀況，以下：
5.六、解決bootstrap-table中表頭與內容不對齊的問題：
只須要在bootstrap-table.js中修改此處代碼，添加一行寬度適配代碼便可；
|
1
2
3
4
|
this
.$header.find(
'th[data-field]'
).each(function (i) {
that.$header_.find(sprintf(
'th[data-field="%s"]'
, $(
this
).data(
'field'
))).data($(
this
).data());
that.$tableHeader.find(
'th'
).eq(i).width($(
this
).innerWidth());
//添加此行代碼
});
|
六、總結：
博主也是在作後臺管理系統時，初次設計到bootstrap table表格組件，以爲它有本身的優點：
- 界面採用扁平化的風格，用戶體驗比較好，更好兼容各類客戶端。這點也是最重要的。
- 開源、免費。國人最喜歡的就是免費了。呵呵。
- 相對Jqgrid、easyUI而言，比較輕量級。功能不能說最全面，但基本夠用。
七、參考的相關api文檔
- Bootstrap 中文網：http://www.bootcss.com/
- Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
- Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
- Bootstrap Table源碼：https://github.com/wenzhixin/bootstrap-table
- Boostrap Table 擴展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
轉載自 http://www.cnblogs.com/wdlhao/p/6694083.html
- 1. 表格組件神器：bootstrap table詳細使用指南
- 2. 【轉載】BootStrap表格組件bootstrap table詳解
- 3. 使用bootstrap table小記（表格組件）
- 4. JS組件系列——表格組件神器：bootstrap table
- 5. bootstrap 表格插件bootstrap-table的使用
- 6. bootstrap table使用指南
- 7. 表格插件BootStrap-Table使用教程
- 8. Bootstrap table表格
- 9. Bootstrap之表格插件Bootstrap-table
- 10. Bootstrap-table使用詳細介紹
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • HTML 指南 - 網站建設指南
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？