Bootstrap學習筆記之Nestable可拖拽樹結構

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