基於Bootstrap-Table的Web表格教程

因爲最近工做須要，又對Bootstrap作了進一步的學習瞭解，在實際應用過程當中發現使用表格來展示數據與信息更方便與直觀，因此開始使用bootstrap的table功能，但bootstrap的table主要提供一些基本的樣式其JS控制方面的功能相對比較弱，因此須要一款更強大的table插件來解決問題，這時bootstrap-table就出場了。

Bootstrap-Table的優勢：

1.由於基於Bootstrap因此相應其樣式都是標準化的。

2.提供了強大的操做選項與方法API，只須要關注業務數據字段的組裝不太須要關注各類樣式。

3.詳細的文檔與例子，特別是例子文檔中常見的表格應用方式基本都有了，直接Copy修改便可。

4.提供了不少第三方擴展插件能夠知足複雜的應用場景。

如下是基於Bootstrap-Table的表格實現樣例

Bootstrap-Table的獲取與使用

1.直接從Git下載

https://github.com/wenzhixin/bootstrap-table

下載解壓後的圖例：

2.在html頁面直接引用便可

注意bootstrap-table是基於bootsrap與jQuery的是因此是須要引入這兩個js庫的以下圖,導入bootsrap-table的js與css。

a.首先引入jQuery與Bootstrap

b.再引入bootstrap-table

注意：引入bootstrap-table-zh-CN.min.js是爲支持中文本地化,bootstrap-table是支持多語言的，可根據須要進行引入。

3.組裝Table的表頭字段

bootstrap-table支持兩種方式來定義表格的，一種是使用html的data屬性方式，另外一種就是使用JaveScript腳本方式，這裏主要介紹後一種js的方式，data屬性方式沒有JaveScript靈活。

JavaScript方式操做過程：

a.首先在html頁面中定義table標記並增長相應的屬性，每個屬性都是以data-x-x="x"標記的，每個屬性的詳細定義請參考官方文檔【表格參數】一節。

bootstrap-table的詳細文檔

b.編寫JavaScript來定義表頭，以下：

$("#caseListTable").bootstrapTable({});經過在()中放入json對象可動態生成表格。

columns : [{}]用於定義表頭的字段名，一個json對象對應一個字段的格式的定義，

c.組裝數據到表格中：

經過jQuery的ajax獲取服務端數據，而後加載到表格中去便可，以下圖：

$("#caseListTable").bootstrapTable('load',caseData);

'load'即方法名，caseData是一個json數組，若是返回json數據中的key與表格中field沒法一一對應用，還須要另寫函數來進行處理一下json數據即此圖中的packagingDataForCaseListTable函數。

注意，若是返回的數據格式是json格式的數組，每個數組項表示一行數據：json數據其中的key要與步驟b中所定義的【field】名稱相對應，如：field:case_name,其對應用json數據格式是{"case_name": "myCase"},）以下圖的json格式樣例：