這篇文章主要為大家詳細介紹了bootstrap table外掛程式動態載入表頭，具有一定的參考價值，感興趣的小夥伴們可以參考一下
bootstrap的table屬性已經很熟悉了，最近遇到乙個問題，猶豫每個列表載入的資料需求不同，所以需要動態的更換表頭。 網上有很多載入**資料的例子，但是卻沒有找到如何動態載入**，再加在資料。 雖然可以乙個**載入一種資料，但是本著學習的態度嘗試了下這種方式，結果發現是可以執行的。分享下思路和實現過程，以備日後使用。
思路：
1、寫介面，查詢出要展示的列。注意介面中必須要有字段中文名稱（columns屬性的title值），欄位的英文名稱（columns的field欄位），特別注意filed欄位應該與最後查詢出的列表中返回的json資料中的key保持一致，不然取不到值。
2、ajax請求剛才的介面，查詢出columns，並給table的columns賦值。
3、載入**展示。
大致**如下：
**：?
varpeopleoptions;
// 人口列表載入
functiontableitem() ;
returnparam;
},
onloadsuccess :function() ;
if(res.data.total == undefined)
tmp = ;
returntmp;
},
columns : [ , , , , ,, ]
}
}
$table = $("#table").bootstraptable(peopleoptions);
};
動態獲取列：?
functiongetcolumns()else);
});
}
console.log(mycolumns);
returnmycolumns;
}
});
}
重新整理列表：
$table.bootstraptable(
"refreshoptions",
);
}
需要注意的是bootstrap的table提供了兩個重新整理的方法，乙個refresh，乙個refreshoptions，前者只是重新整理當前**，後者會將**中的元件全部更新一遍，因為我們替換了url和columns，所以需要呼叫後者。
動態載入表頭其實就是類似echart中動態載入資料的感覺一樣，只是改變整個option中的相關屬性即可。
優點：**量會大大減少，當我們要載入不同資料且樣式一樣的**的時候可以採用這樣的方式。
缺點：樣式很難維護。前端人員不好定位bug，所以很難修改相應的樣式bug。
依據專案實際情況，擇優使用吧。
Bootstrap table學習筆記
引入css檔案 引入相關庫 我們需要引入jquery庫 bootstrap庫 以及bootstrap table.js檔案 put your locale files after bootstrap table.js 啟用bootstrap table外掛程式 官方文件中給出了我們有兩種那個方式來啟...
BootstrapTable使用技巧
使用者交易 商戶名稱 日期支付寶金額 支付寶筆數 總金額總筆數 關閉 複製 通過data field 的值會從後端返回的資料直接渲染到頁面上。operateformatter function value,row,index else 複製 operateformatter和window.opera...
bootstrap table 常用方法
json物件的陣列 var rows table bootstraptable getselections tableid bootstraptable table bootstraptable refresh 踩過的坑 該方法在初次載入沒有資料的情況下會失效。table bootstraptabl...