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