這篇文章主要為大家展示了“bootstrap如何實(shí)現(xiàn)table插件動(dòng)態(tài)加載表頭”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap如何實(shí)現(xiàn)table插件動(dòng)態(tài)加載表頭”這篇文章吧。
bootstrap的table屬性已經(jīng)很熟悉了，最近遇到一個(gè)問題，猶豫每個(gè)列表加載的數(shù)據(jù)需求不同，所以需要?jiǎng)討B(tài)的更換表頭。 網(wǎng)上有很多加載表格數(shù)據(jù)的例子，但是卻沒有找到如何動(dòng)態(tài)加載表格，再加在數(shù)據(jù)。 雖然可以一個(gè)表格加載一種數(shù)據(jù)，但是本著學(xué)習(xí)的態(tài)度嘗試了下這種方式，結(jié)果發(fā)現(xiàn)是可以執(zhí)行的。分享下思路和實(shí)現(xiàn)過程，以備日后使用。
思路：
1、寫接口，查詢出要展示的列。注意接口中必須要有字段中文名稱（columns屬性的title值），字段的英文名稱（columns的field字段），特別注意filed字段應(yīng)該與最后查詢出的列表中返回的json數(shù)據(jù)中的key保持一致，不然取不到值。
2、ajax請求剛才的接口，查詢出columns，并給table的columns賦值。
3、加載表格展示。
大致代碼如下：
表格：
重慶分公司
重慶分公司
var peopleOptions;
// 人口列表加載
function tableItem() {
peopleOptions = {
method : "POST", // 使用get請求到服務(wù)器獲取數(shù)據(jù)
url : path + "/api/information/people/getList", // 獲取數(shù)據(jù)的地址
contentType : "application/x-www-form-urlencoded",// 重要否則POST會(huì)報(bào)錯(cuò)
striped : false, // 表格顯示條紋
pagination : true, // 啟動(dòng)分頁
pageSize : 10, // 每頁顯示的記錄數(shù)
pageNumber : 1, // 當(dāng)前第幾頁
pageList : [ 10, 20, 50 ], // 記錄數(shù)可選列表
uniqueId : "id",
showColumns : false, // 顯示下拉框勾選要顯示的列
showToggle : false, // 顯示 切換試圖（table/card）按鈕
clickToSelect : false, // 點(diǎn)擊可選
singleSelect : false, // 禁止多選
maintainSelected : true, // 在點(diǎn)擊分頁按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
sortable : true, // 禁止所有列的排序
sidePagination : "server", // 表示服務(wù)端請求 后臺(tái)分頁
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() { // 加載成功時(shí)執(zhí)行
responseHandler : function(res) { // 格式化數(shù)據(jù)
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 : '序號(hào)',
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 : '身份證號(hào)',
field : 'identityCode',
align : 'center',
valign : 'middle',
}, {
title : '民族',
field : 'nation',
align : 'center',
valign : 'middle',
} ]
}
}
$table = $("#table").bootstrapTable(peopleOptions);
};動(dòng)態(tài)獲取列：
function getColumns() {
// 加載動(dòng)態(tài)表格
$.ajax({
url : path + "api/information/people/getLableColumn?ztreeId=" + ztreeId,
type : 'get',
dataType : "json",
async : false,
success : function(returnValue) {
// 未查詢到相應(yīng)的列，展示默認(rèn)列
if (returnValue.retCode == "0") {
//沒查到列的時(shí)候把之前的列再給它
myColumns = $table.bootstrapTable('getOptions').columns[0];
} else {
// 異步獲取要?jiǎng)討B(tài)生成的列
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;
}
});
}刷新列表：
//點(diǎn)擊左側(cè)樹后重新加載表格
$table.bootstrapTable(
"refreshOptions",
{
url : path + "/api/peopledataInfo/getPeopleInfoList", // 獲取數(shù)據(jù)的地址
columns : myColumns,
}
);
}需要注意的是bootstrap的table提供了兩個(gè)刷新的方法，一個(gè)refresh，一個(gè)refreshOptions，前者只是刷新當(dāng)前表格，后者會(huì)將表格中的組件全部更新一遍，因?yàn)槲覀兲鎿Q了url和columns，所以需要調(diào)用后者。
展示效果：
動(dòng)態(tài)加載表頭其實(shí)就是類似Echart中動(dòng)態(tài)加載數(shù)據(jù)的感覺一樣，只是改變整個(gè)Option中的相關(guān)屬性即可。
優(yōu)點(diǎn)：代碼量會(huì)大大減少，當(dāng)我們要加載不同數(shù)據(jù)且樣式一樣的表格的時(shí)候可以采用這樣的方式。
缺點(diǎn)：樣式很難維護(hù)。前端人員不好定位bug，所以很難修改相應(yīng)的樣式bug。
依據(jù)項(xiàng)目實(shí)際情況，擇優(yōu)使用吧。
以上是“bootstrap如何實(shí)現(xiàn)table插件動(dòng)態(tài)加載表頭”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
