Bootstrap之Nestable可拖拽树结构,简单

Nestable是基于Bootstrap的一个可拖拽的树结构表现插件。

1.事件Events
当重新排序后触发

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

2.方法Methods
将页面显示的树结构序列化

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

按开头的例子序列化返回的JSON数据应该是

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

$('.dd').nestable('expandAll');//展开所有节点  

$('.dd').nestable('collapseAll');//折叠所有节点

3.配置Configuration

$('.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