JS組件系列之Bootstraptable表格組件神器【終結篇】_javascript技巧

JS表格組件神器bootstrap table詳解（基礎版）

JS組件系列之Bootstrap table表格組件神器【終結篇】

JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調序】

Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數據，支持單選，復選框，排序，分頁,顯示/隱藏列,固定標題滾動表,響應式設計，Ajax加載JSON數據，點擊排序的列，卡片視圖等。那么本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結篇】，一起學習吧！

一、效果展示

1、表格行樣式

比如我們有一個顯示訂單頁面的需求，不同狀態的訂單顯示不同的顏色，如圖：

2、表格行內編輯

第一篇的時候有園友就問過博主是否可以支持行內編輯的效果，答案是肯定的。我們先來看看效果：

編輯前

點擊某個單元格數據

編輯后完成后

3、表格行列合并

關于行列合并的需求博主覺得是非常常見的，尤其是做頁面報表的時候需要用到。先來看看效果：

當前頁顯示不全，點擊進入看看。怎么樣？效果還不錯吧。

4、表格數據導出

關于表格數據導出，bootstrap table支持三種模式的導出：basic、all、selected。也就是當前頁數據導出、所有數據導出、選中數據導出。并且支持導出多種類型的文件，比如常見的excel、xml、json等格式。

導出當前頁到excel

導出表格所有數據

導出選中行數據

至于其他類型的文件的導出，和excel基本相同，就不做效果展示了。

二、表格行樣式代碼示例

關于表格行的樣式設置，其他是它一個最基礎的功能，為什么要把它放在第三篇？是因為博主覺得這功能可能到處都用得著。當然，效果并不難，自己用jQuery設置tr的背景色也可以實現，但是博主覺得，既然bootstrap table提供了機制設置行的背景色，我們何不用它內置的api呢。我們看看如何實現。

初始化表格的時候

其實重點就在這個參數里面：

bootstrap table支持5中表格的行背景色，分別是'active', 'success', 'info', 'warning', 'danger'這五種，至于每種對應的背景顏色，將代碼運行起來就可看到。關于這個方法的返回值，博主第一次用的時候也研究了好久，按照bootstrap table的規則，必須返回一個json格式的對象型如： { classes: strclass } 。

三、表格行內編輯代碼示例

關于表格行內編輯，需要使用bootstrap table擴展的幾個js文件。

1、引入額外的js文件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS組件系列之Bootstraptable表格組件神器【終結篇】_javascript技巧

JS組件系列之Bootstraptable表格組件神器【終結篇】_javascript技巧:bootstrap table系列： JS表格組件神器bootstrap table詳解（基礎版） JS組件系列之Bootstrap table表格組件神器【終結篇】 JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調序】 Bootstrap Table是輕量級的和功能豐富的以表格

推薦度：

點擊下載本文 文檔為doc格式