前言：前面介紹了兩篇關于bootstrap table的基礎用法，這章我們繼續來看看它比較常用的一些功能，來個終結篇吧，毛爺爺告訴我們做事要有始有終~~bootstrap table這東西要想所有功能覆寫似乎不太現實，部落客挑選了一些自認為比較常用的功能在此分享給各位園友。源碼也在這篇統一給出。好了，不多說廢話，開始我們的幹貨之旅吧。
bootstrap table系列：
<a href="http://www.cnblogs.com/landeanfen/p/4976838.html" target="_blank">JS元件系列——表格元件神器：bootstrap table</a>
<a href="http://www.cnblogs.com/landeanfen/p/4993979.html">JS元件系列——表格元件神器：bootstrap table（二：父子表和行列調序）</a>
<a href="http://www.cnblogs.com/landeanfen/p/5005367.html" target="_blank">JS元件系列——表格元件神器：bootstrap table（三：終結篇，最後的幹貨福利）</a>
比如我們有一個顯示訂單頁面的需求，不同狀态的訂單顯示不同的顔色，如圖：
第一篇的時候有園友就問過部落客是否可以支援行内編輯的效果，答案是肯定的。我們先來看看效果：
編輯前
點選某個單元格資料
編輯後完成後
關于行列合并的需求部落客覺得是非常常見的，尤其是做頁面報表的時候需要用到。先來看看效果：
目前頁顯示不全，點選進入看看。怎麼樣？效果還不錯吧。
關于表格資料導出，bootstrap table支援三種模式的導出：basic、all、selected。也就是目前頁資料導出、所有資料導出、選中資料導出。并且支援導出多種類型的檔案，比如常見的excel、xml、json等格式。
至于其他類型的檔案的導出，和excel基本相同，就不做效果展示了。
關于表格行的樣式設定，其他是它一個最基礎的功能，為什麼要把它放在第三篇？是因為部落客覺得這功能可能到處都用得着。當然，效果并不難，自己用jQuery設定tr的背景色也可以實作，但是部落客覺得，既然bootstrap table提供了機制設定行的背景色，我們何不用它内置的api呢。我們看看如何實作。
初始化表格的時候
其實重點就在這個參數裡面：
bootstrap table支援5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'這五種，至于每種對應的背景顔色，将代碼運作起來就可看到。關于這個方法的傳回值，部落客第一次用的時候也研究了好久，按照bootstrap table的規則，必須傳回一個json格式的對象型如： { classes: strclass } 。
關于表格行内編輯，需要使用bootstrap table擴充的幾個js檔案。
如果是在js裡面初始化，寫法如下：
重點還是看看這個事件的處理方法
對應的方法裡面需要自己處理儲存的邏輯。四個參數field, row, oldValue, $el分别對應着目前列的名稱、目前行資料對象、更新前的值、編輯的目前單元格的jQuery對象。
表格的行列合并功能不用引用其他的js檔案，隻需要在cshtml頁面使用table的colspan和rowspan即可實作。
怎麼樣，有沒有很簡單。當然，有人說了，你都可以不用js初始化，直接在cshtml裡面用table的屬性去設定url、分頁等資訊。确實，如果我們看過它的api，會發現它初始化的每一個屬性都對應一個table的屬性。型如
如果你的表格沒有一些特殊的事件需要處理，這樣是完全沒有問題的。
表格資料的導出功能也需要一些擴充的js支援。
還是來看重點：這兩個屬性
showExport表示是否顯示導出的按鈕，exportDataType表示導出的模式是目前頁、所有資料還是選中資料。
以上就是功能的效果以及實作的簡單代碼。部落客發現有幾個問題有待解決。
1、行内編輯的功能是每一個單元格送出到背景，這樣會造成資料庫的頻繁操作，感覺不太合适。不知道有沒有更好的方式，每行送出到背景。
2、導出的功能雖然很好用，但是遺憾的是不支援IE浏覽器，部落客試過官網上面的example，好像IE也導出不了。待驗證。
源碼提供出來，園友們有興趣可以看看。
本文轉自懶得安分部落格園部落格，原文連結：http://www.cnblogs.com/landeanfen/p/5005367.html，如需轉載請自行聯系原作者