minglight

Bootstrap是一個利用Convention就幫忙做掉很多事情的一個CSS Framework，讓程式設計師可以很簡單的就可以做出一個很漂亮的UI。

雖然稱為CSS Framework，但其實後端是利用jQuery當作Base幫你處理掉很多事情，也有開放一些介面讓你可以Customize一些功能，可以定義為簡單好看又好用的Framework。

由於Bootstrap的基礎功能不多，因此外界開發了許多建立在Boostrap上的plugin，就像是jQuery有許多plugin依樣，而Bootstrap Table就是其中的一個。

Bootstrap Table

 一、資源安裝

為了要執行Bootstrap Table你必須要先Includer幾個library
1. jquery.js  
    http://jquery.com/

2. bootstrap.js , bootstrap.css
    http://getbootstrap.com/ 下載之後解壓縮會找到這兩個檔案

3. 安裝glyphicons
    在bootstrap.zip裡面有一個font的folder，glyphicon所有的圖為了要能縮放，都做成了字型!所以要安裝字型必須要去改bootstrap.css的url的位置
      - 將font整個folder放進去你的server的folder中
      - 打開bootstrap.css搜尋glyphicon，更改內部的url的位置

4. boostrap-table.js, bootstrap-table.css 
    http://bootstrap-table.wenzhixin.net.cn/

二、Bootstrap Table

你的程式有參考上列的資源後，基本上不需要寫任何的JS跟CSS就可以讓你的Table變得很漂亮了，我不會詳細介紹每個細節，因為Bootstrap Table已經有很清楚的範例，我在這只會介紹幾個重要的key point以及document沒有提到的

Example : http://bootstrap-table.wenzhixin.net.cn/examples/ ,  http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html
Document : http://bootstrap-table.wenzhixin.net.cn/documentation/

怎麼看Doc : 打開上面的Document網頁，Name是在用javascript的時候用的，而Attribute則是當你要加在HTML tag的屬性時使用

1. Basic Table

只要在你的<table>裡面加上屬性  data-toggle="table"，恭喜你，你的table已經變成Bootstrap的好看介面了，更棒的是很多好用的功能，也只需要另外加在<table>即可

    * data-classes : 放class的地方，預設是"table table-hover" 是bootstrap table的格式, 且hover會有效果，如果加上"table-condensed" 則會出現比較小的行距
    * data-striped: 要不要在Row之間畫線

2. Load Data的方式

提供三種可以將資料匯入的方式

- From HTML : HTML內本來就有<table>的所有資料，只要加上屬性data-toggle="table"就可以了
- From data : 如果你的資料是在javascript內，那麼你必須要做
     * <th>要加上一個屬性 data-field="fieldNameA"
     * 在JS中你的物件的key必須match這個name，並用陣列包起來
     * 在JS中執行 $('#myTable').bootstrapTable({data : mydata});
- From URL : 在<table>的屬性加上 data-url = "jsonURL..."，注意格式必須是json，bootstrapTable幫你把呼叫的程式都做完了

3. 調整Column寬度 

- 範例裡面並沒有講解清楚，而且根據目前版本的實作，Column的width並沒辦法真的限制住Column的寬度，當呈現的資料有換頁時，寬度還是會動態的改變
  要限定Column的寬度照範例的話，是在<th>內加上一個class "col-xs-1","col-xs-2",....."col-xs-n" 他會照比例來限制資料寬度

4. RowStyle , CellStyle

Bootstrap Table提供一個讓你可以動態的customize style的方式，分成在<table>中的屬性 data-row-style 以及在<th>層中的屬性 data-cell-style，用rowstyle舉例
- 在<table>中加屬性 data-row-style="myRowStyle"
- 在JS中加一個function叫做 myRowStyle(item, i){} 並且回傳一個物件{classes : "xxx" , css : "disable:true"}
     注意這邊只有兩個key是合法的 classes & css
     給你item跟index讓你自由的判斷要回傳那些，回傳空的{}也行

- Bootstrap會自動幫你把clsss跟css加到<tr>上面去

data-cell-style則是加到<td>上面去

5. Sorting

Bootstrap Table有內建排序功能，將資料丟進去之後她會自動幫忙排序，即使分頁也能夠排的很好，Server排序的功能還沒Release。
Sorting 分成
放在<table>的

  data-sort-name="name"  : 預設的排序column name
  data-sort-order="desc" : 預設的order
  data-sortable = 整個Table能不能做sorting, 預設是true

放在<th>中的
  data-sortable="true" : 這個column能不能sort，預設是false
  data-order = "asc" : 排序方式
  data-sorter = "mySorterA" : 會呼叫mySorterA這個JS的function(a,b){} ，回傳1是a>b ; -1是b>a

 6. formatter 

除了用data-cell-style指定動態的class, css之外，也有另一種可以操作整個Column的顯示方式，回傳的是整個html。
舉例來說，如果Server來的資料只是url，可以幫它包裝成<img>

在<th>中
data-formatter="myFormatterA" ，會去呼叫function myFormatterA(value, row, index)，回傳值為html string
把value, index跟整個row都給你參考了，應該會很好實作

 7. Column Select

Bootstrap Table提供讓使用者可以自己勾選想要顯示的欄位

<table>下

data-show-columns="true" : Show出可以選欄位的功能
data-minimum-count-columns="[1|n]" : 限制最少需要顯示多少欄位，當欄位數小於這個數字，則不能再取消顯示任何欄位(會被disable掉)

<th>下

data-visible="false" : 預設值是true。如果選擇是false，則一開始不顯示，但是可以從選單內再勾選顯示回來
data-switchable="false" : 預設值是true。這個column是不是可以被選擇顯示/不顯示的選項之一，如果是false，則不會出現在Column Select的選單內 

8. Toolbar

Table上方可以放一些功能按鍵，分成預設按鈕與客製化。

預設按鈕 :

data-search="true"　: show搜尋列
data-show-refresh="true" : show refresh按鈕
data-show-columns="true" : show選擇顯示column的功能鈕

客製化Toolbar

其實就是bootstrap本身支援的功能，看你是要用class="btn-group"還是要calss="form-group"，參考http://getbootstrap.com/components/

步驟如下 : 
- 在<table>放上你的客製化toolbar div並放上id="abcTool"
- 在<table>內的屬性指定 data-toolbar="#abcTool"

9. Search

在<table>加上屬性 data-search="true" 就可以搜尋所有的column。
如果想要限制只能搜尋某些column，就在<th>的屬性加上data-searchable="false" (預設是true)

10. Paging

只需要加一個屬性就可以把分頁做好了

data-pagination="{true|false}" : 是否要有分頁功能
data-page-number = 1　: 一開始在第幾頁
data-page-size = 10 : 預設一頁幾筆資料
data-page-list = "[10, 25, 50, 100]" : 一頁幾筆資料的選項

data-side-pagination="{client|server}" : 如果值是server，則每次換頁都會去跟Server要資料，給的參數為 limit, offset, search, sort, order

而回傳值則是這樣{
    total : 1000 ,
    rows : [{id:"1", name : "Hank"}, {id:"2", name="someone"}]
}