JS組件系列之Bootstraptable表格組件神器【二、父子表和行列調序】_javascript技巧

bootstrap table系列：

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

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

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

一、效果展示

今天稍微改變下方式，先來看看實現效果，后面再介紹代碼實現及注意事項。來，效果圖來一發：

1、父子表效果圖

2、行調序

調序前

拖動行調序到第一行

3、列調序

調序前

拖動列標題調序

調序后

二、父子表代碼詳解

上章我們介紹Bootstrap table基礎用法的時候介紹過，初始化表格的時候有一個屬性“detailView”，將它設置為true，在每行的前面即可看到一個“+”形狀的圖標。點擊這個圖標即觸發加載子表格的事件。大概的原理就是如此，來看看代碼，其實也很簡單。

1、初始化表格，注冊行展開事件

還是來看看子表加載事件onExpandRow對應方法function (index, row, $detail)的三個參數，

index：父表當前行的行索引。

row：父表當前行的Json數據對象。

$detail：當前行下面創建的新行里面的td對象。

第三個參數尤其重要，因為生成的子表的table在裝載在$detail對象里面的。bootstrap table為我們生成了$detail這個對象，然后我們只需要往它里面填充我們想要的table即可。

2、我們來看oInit.InitSubTable()這個方法

由此可以看出生成子表的原理就是創建一個table對象cur_table，然后再注冊這個對象的表格初始化即可。是不是很簡單~~

三、行調序代碼詳解

行調序的代碼就更簡單了，來看看。

1、需要額外引用兩個js文件

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

JS組件系列之Bootstraptable表格組件神器【二、父子表和行列調序】_javascript技巧

JS組件系列之Bootstraptable表格組件神器【二、父子表和行列調序】_javascript技巧:Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數據，支持單選，復選框，排序，分頁,顯示/隱藏列,固定標題滾動表,響應式設計，Ajax加載JSON數據，點擊排序的列，卡片視圖等。今天就結合Bootstrap table的父子表和行列調序的用法再來介紹下它稍微高

推薦度：

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