這篇文章主要為大家詳細介紹了bootstrap table插件動態加載表頭，具有一定的參考價值，感興趣的小伙伴們可以參考一下
bootstrap的table屬性已經很熟悉了，最近遇到一個問題，猶豫每個列表加載的數據需求不同，所以需要動態的更換表頭。 網上有很多加載表格數據的例子，但是卻沒有找到如何動態加載表格，再加在數據。 雖然可以一個表格加載一種數據，但是本着學習的態度嘗試了下這種方式，結果發現是可以執行的。分享下思路和實現過程，以備日后使用。
思路：
1、寫接口，查詢出要展示的列。注意接口中必須要有字段中文名稱（columns屬性的title值），字段的英文名稱（columns的field字段），特別注意filed字段應該與最后查詢出的列表中返回的json數據中的key保持一致，不然取不到值。
2、ajax請求剛才的接口，查詢出columns，並給table的columns賦值。
3、加載表格展示。
大致代碼如下：
表格：
|
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
|
var
peopleOptions;
// 人口列表加載
function
tableItem() {
peopleOptions = {
method :
"POST"
,
// 使用get請求到服務器獲取數據
url : path +
"/api/information/people/getList"
,
// 獲取數據的地址
contentType :
"application/x-www-form-urlencoded"
,
// 重要否則POST會報錯
striped :
false
,
// 表格顯示條紋
pagination :
true
,
// 啟動分頁
pageSize : 10,
// 每頁顯示的記錄數
pageNumber : 1,
// 當前第幾頁
pageList : [ 10, 20, 50 ],
// 記錄數可選列表
uniqueId :
"id"
,
showColumns :
false
,
// 顯示下拉框勾選要顯示的列
showToggle :
false
,
// 顯示 切換試圖（table/card）按鈕
clickToSelect :
false
,
// 點擊可選
singleSelect :
false
,
// 禁止多選
maintainSelected :
true
,
// 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
sortable :
true
,
// 禁止所有列的排序
sidePagination :
"server"
,
// 表示服務端請求 后台分頁
toolbar :
"#toolbar"
,
// 指明自定義的toolbar
queryParamsType :
"undefined"
,
queryParams :
function
queryParams(params) {
var
param = {
pageNumber : params.pageNumber,
pageSize : params.pageSize,
orgId : ztreeId,
nodeId : ztreeId,
citizenName : $(
"#fullname"
).val().trim(),
sex : $(
"#sex"
).val(),
age : $(
"#age"
).val().trim(),
identityCode : $(
"#idCard"
).val().trim(),
cellPhone : $(
"#isMobile"
).val().trim(),
adress : $(
"#adress"
).val().trim(),
};
return
param;
},
onLoadSuccess :
function
() {
// 加載成功時執行
responseHandler :
function
(res) {
// 格式化數據
console.log(res);
if
(res.data.total != undefined)
tmp = {
total : res.data.total,
rows : res.data.rows
};
if
(res.data.total == undefined)
tmp = {
total : res.data.length,
rows : res.data
};
return
tmp;
},
columns : [ {
checkbox :
true
,
title :
'全選'
,
valign :
'middle'
}, {
title :
'序號'
,
field :
'number'
,
width :
'40px'
,
align :
'center'
,
valign :
'middle'
,
formatter : indexFormatter
}, {
title :
'姓名'
,
field :
'citizenName'
,
align :
'center'
,
valign :
'middle'
,
}, {
title :
'年齡'
,
field :
'age'
,
align :
'center'
,
width : 28,
valign :
'middle'
,
formatter : ageFormatter
}, {
title :
'性別'
,
field :
'sex'
,
width : 28,
align :
'center'
,
valign :
'middle'
,
},{
title :
'身份證號'
,
field :
'identityCode'
,
align :
'center'
,
valign :
'middle'
,
}, {
title :
'民族'
,
field :
'nation'
,
align :
'center'
,
valign :
'middle'
,
} ]
}
}
$table = $(
"#table"
).bootstrapTable(peopleOptions);
};
|
動態獲取列：
|
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
|
function
getColumns() {
// 加載動態表格
$.ajax({
url : path +
"api/information/people/getLableColumn?ztreeId="
+ ztreeId,
type :
'get'
,
dataType :
"json"
,
async :
false
,
success :
function
(returnValue) {
// 未查詢到相應的列，展示默認列
if
(returnValue.retCode ==
"0"
) {
//沒查到列的時候把之前的列再給它
myColumns = $table.bootstrapTable(
'getOptions'
).columns[0];
}
else
{
// 異步獲取要動態生成的列
var
arr = returnValue.data;
$.each(arr,
function
(i, item) {
myColumns.push({
"field"
: item.labelColumnCode,
"title"
: item.labelColumnName,
"hide"
:
true
,
"align"
:
'center'
,
"valign"
:
'middle'
});
});
}
console.log(myColumns);
return
myColumns;
}
});
}
|
刷新列表：
|
1
2
3
4
5
6
7
8
9
10
|
//點擊左側樹后重新加載表格
$table.bootstrapTable(
"refreshOptions"
,
{
url : path +
"/api/peopledataInfo/getPeopleInfoList"
,
// 獲取數據的地址
columns : myColumns,
}
);
}
|
需要注意的是bootstrap的table提供了兩個刷新的方法，一個refresh，一個refreshOptions，前者只是刷新當前表格，后者會將表格中的組件全部更新一遍，因為我們替換了url和columns，所以需要調用后者。
展示效果：
動態加載表頭其實就是類似Echart中動態加載數據的感覺一樣，只是改變整個Option中的相關屬性即可。
優點：代碼量會大大減少，當我們要加載不同數據且樣式一樣的表格的時候可以采用這樣的方式。
缺點：樣式很難維護。前端人員不好定位bug，所以很難修改相應的樣式bug。
依據項目實際情況，擇優使用吧。