bootstrap的table屬性已經很熟悉了，最近遇到一個問題，猶豫每個列表加載的數(shù)據(jù)需求不同，所以需要動態(tài)的更換表頭。 網上有很多加載表格數(shù)據(jù)的例子，但是卻沒有找到如何動態(tài)加載表格，再加在數(shù)據(jù)。 雖然可以一個表格加載一種數(shù)據(jù)，但是本著學習的態(tài)度嘗試了下這種方式，結果發(fā)現(xiàn)是可以執(zhí)行的。分享下思路和實現(xiàn)過程，以備日后使用。
思路：
1、寫接口，查詢出要展示的列。注意接口中必須要有字段中文名稱（columns屬性的title值），字段的英文名稱（columns的field字段），特別注意filed字段應該與最后查詢出的列表中返回的json數(shù)據(jù)中的key保持一致，不然取不到值。
2、ajax請求剛才的接口，查詢出columns，并給table的columns賦值。
3、加載表格展示。
大致代碼如下：
表格：
var peopleOptions;// 人口列表加載function tableItem() { peopleOptions = { method : "POST", // 使用get請求到服務器獲取數(shù)據(jù) url : path + "/api/information/people/getList", // 獲取數(shù)據(jù)的地址 contentType : "application/x-www-form-urlencoded",// 重要否則POST會報錯 striped : false, // 表格顯示條紋 pagination : true, // 啟動分頁 pageSize : 10, // 每頁顯示的記錄數(shù) pageNumber : 1, // 當前第幾頁 pageList : [ 10, 20, 50 ], // 記錄數(shù)可選列表 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() { // 加載成功時執(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 : '序號', 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);};動態(tài)獲取列：
function getColumns() { // 加載動態(tài)表格 $.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 { // 異步獲取要動態(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; } });}刷新列表：
//點擊左側樹后重新加載表格 $table.bootstrapTable( "refreshOptions", { url : path + "/api/peopledataInfo/getPeopleInfoList", // 獲取數(shù)據(jù)的地址 columns : myColumns, } ); }需要注意的是bootstrap的table提供了兩個刷新的方法，一個refresh，一個refreshOptions，前者只是刷新當前表格，后者會將表格中的組件全部更新一遍，因為我們替換了url和columns，所以需要調用后者。
展示效果：
動態(tài)加載表頭其實就是類似Echart中動態(tài)加載數(shù)據(jù)的感覺一樣，只是改變整個Option中的相關屬性即可。
優(yōu)點：代碼量會大大減少，當我們要加載不同數(shù)據(jù)且樣式一樣的表格的時候可以采用這樣的方式。
缺點：樣式很難維護。前端人員不好定位bug，所以很難修改相應的樣式bug。
依據(jù)項目實際情況，擇優(yōu)使用吧。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
