Nestable是基於Bootstrap的一個可拖拽的樹結構表現外掛。

下面粗略的介紹一下它的用法，只作為學習參考，如有不合適之處，請各位湊合看。

下圖是我在現在系統中用到的Nestable，對系統模組排序。

1.首先是需要引入的檔案

• bootstrap.min.css Bootstrap的CSS檔案
• font-awesome.min.css 這個是Bootstrap的一個圖示和字型的外掛，Nestable應該用了它的一些圖示，如果不引入這個檔案有可能圖示不能顯示出來。
• ace.min.css 這個一直不知道是什麼，沒來得及查閱資料，有知道的請告知一下
• jquery-2.0.3.min.js 這個不解釋
• bootstrap.min.js 同上
• jquery.nestable.min.js 這是就是今天介紹的主體

以上檔案我會統一放在附件裡面

2.下面是一個示例

HTML：

Html程式碼  

1. <div class="dd">  
2.     <ol class="dd-list">  
3.         <li class="dd-item" data-id="1">  
4.             <div class="dd-handle">Item 1</div>  
5.         </li>  
6.         <li class="dd-item" data-id="2">  
7.             <div class="dd-handle">Item 2</div>  
8.         </li>  
9.         <li class="dd-item" data-id="3">  
10.             <div class="dd-handle">Item 3</div>  
11.             <ol class="dd-list">  
12.                 <li class="dd-item" data-id="4">  
13.                     <div class="dd-handle">Item 4</div>  
14.                 </li>  
15.                 <li class="dd-item" data-id="5">  
16.                     <div class="dd-handle">Item 5</div>  
17.                 </li>  
18.             </ol>  
19.         </li>  
20.     </ol>  
21. </div>  

在head標籤內加入

Js程式碼  

1. <script type="text/javascript">  
2.     jQuery(function() {  
3.         $('.dd').nestable();  
4.     });  
5. </script>  

3.事件Events

當重新排序後觸發

Js程式碼  

1. $('.dd').on('change', function() {  
2.     /* on change event */  
3. });  

4.方法Methods

將頁面顯示的樹結構序列化

Js程式碼  

1. $('.dd').nestable('serialize');  

按開頭的例子序列化返回的JSON資料應該是

Json程式碼  

1. [{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]  

Js程式碼  

1. $('.dd').nestable('expandAll');//展開所有節點  

Js程式碼  

1. $('.dd').nestable('collapseAll');//摺疊所有節點  

5.配置Configuration

Js程式碼  

1. $('.dd').nestable({ /* config options */ });  

 可配置項：

• • maxDepth 樹節點層次（預設5）
  • group 允許在列表之間拖動的組ID（預設0）
  • listNodeName 建立樹結構的的HTML標籤（預設'ol'）
  • itemNodeName  建立樹結構節點的HTML標籤（預設'li'）
  • rootClass 根節點的class屬性名稱（預設'dd'）
  • listClass 所有節點的class屬性名稱（預設'dd-list'）
  • itemClass 樹結構葉子節點class名稱（預設'dd-item'）
  • dragClass 
  • handleClass 
  • collapsedClass 
  • placeClass 
  • emptyClass 
  • expandBtnHTML 
  • collapseBtnHTML