【转】Nestable可拖拽树

原文地址：https://blog.csdn.net/wangmj518/article/details/81746523

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