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:
<div class="dd"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> </li> <li class="dd-item" data-id="3"> <div class="dd-handle">Item 3</div> <ol class="dd-list"> <li class="dd-item" data-id="4"> <div class="dd-handle">Item 4</div> </li> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> </li> </ol> </li> </ol> </div>
在head标签内加入
<script type="text/javascript"> jQuery(function() { $('.dd').nestable(); }); </script>
3.事件Events
当重新排序后触发
$('.dd').on('change', function() { /* on change event */ });
4.方法Methods
将页面显示的树结构序列化
$('.dd').nestable('serialize');
按开头的例子序列化返回的JSON数据应该是
[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
$('.dd').nestable('expandAll');//展开所有节点
$('.dd').nestable('collapseAll');//折叠所有节点
5.配置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
其它几个属性实在懒得翻译了,英语半吊子水平,死脑细胞太多了,改天有时间补上吧,见谅。。。
相关推荐
自己整理的bootstrap学习笔记,非常值得拥有,需要的朋友,可以下载学习。
bootstrap学习笔记-html5 各类简单案例,适合初学者
bootstrap树结构简单实现bootstrap树结构简单实现bootstrap树结构简单实现bootstrap树结构简单实现
李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记
用于页面生成,自带轮播、切换等效果,基于bootstrap和jquery,页面可预览编辑
bootstrap框架下带搜索功能的下拉树插件,在bootstrao-select和bootstrap-treeview的基础上实现(带演示模板可以直接使用)
前端Bootstrap+Es6+vue学习笔记
bootstrap-table.css 表格拖拽排序里面有bootstrap-table表格拖拽行所需js以及css非常好用
修改bootstrap table设置列宽问题,增加插件和bootstrap table组合可随意拖动表格的列宽
bootstrap框架下带搜索功能的下拉树插件,在bootstrao-select和bootstrap-treeview的基础上实现(带演示模板可以直接使用)
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
实现了bootstrapTable 的列宽可鼠标拖动,方便查看列宽显示不完全的内容,前台js
【免费】bootstrap树形结构demo
bootstrap4学习笔记,中文的,适用于初学者学习,知识点配合案例的。
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。