? ? ? 由于工作的經常需要寫一些Web前端的頁面用于展現數據，在實際應用過程中發現使用表格來展現數據與信息更方便與直觀，所以開始使用bootstrap的table功能，但bootstrap的table主要提供一些基本的樣式其JS控制方面的功能相對比較弱，所以需要一款更強大的table插件來解決問題，這時bootstrap-table就出場了。
一、Bootstrap-Table是什么？
這是個插件是由wenzhixin(文翼)大牛開發的并已經開源，下面是其官方主頁面：
官方描述：基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。Bootstrap-Table是一個基于jQuery插件，能提供各種強大的前后端表格數據處理功能
二、為什么是Bootstrap-Table
在平時的工作中又需要開發一些前端Web頁面，因為本人是非專業的Web前端開發人員，對Web前端開發沒有什么經驗，特別是對于前端開發的各種框架AngularJS、YAML等，一看就頭大，這些框架對于我們只會寫一點js的人來說太重了學習成本很高，所以對于我們需要一個快速開發出想要的頁面表格來說Bootstrap-Table不合適過了。
Bootstrap-Table的優點：
1.因為基于Bootstrap所以相應其樣式都是標準化的。
2.提供了強大的操作選項與方法API，只需要關注業務數據字段的組裝不太需要關注各種樣式。
3.詳細的文檔與例子，特別是例子文檔中常見的表格應用方式基本都有了，直接Copy修改即可。
4.提供了很多第三方擴展插件可以滿足復雜的應用場景。
5.上圖看看我們的實現效果，是不是很酷吧。
三、Bootstrap-Table的獲取與使用
1.直接從Git下載
https://github.com/wenzhixin/bootstrap-table
下載解壓
2.在html頁面直接引用即可
注意bootstrap-table是基于bootsrap與jQuery的是所以是需要引入這兩個js庫的如下圖,導入bootsrap-table的js與css。
注意：引入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"標記的，每一個屬性的詳細定義請參考官方文檔【表格參數】一節。
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格式樣例：
四、Bootstrap-Table的擴展
bootstrap支持一些特殊的擴展功能如：字段的過濾與表格編輯與導出，詳細可參者其官方文檔
五、總結：
? ? ?bootstrap-table的最大特點就是讓你在開發html頁面時只關注于業務與數據，其他方面如樣式與控件的操作等它都統統能幫你搞定，此篇只是一個基本指南，關于表格的各種應用場景還是需要在實踐中進行體會，特別是其豐富的例子可以進行快速復制使用，PS:本人不是專業的Web端開發人員，只是拋磚引玉，如有相關Web開發的概念錯誤請見諒。
