基於Bootstrap-Table的Web表格教程

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

Bootstrap-Table的優勢:html

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

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

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

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

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

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格式樣例:



相關文章
相關標籤/搜索