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代码

<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标签内加入

Js代码

<script type="text/javascript">
jQuery(function() {
$('.dd').nestable();
});
</script>

3.事件Events

当重新排序后触发

Js代码

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

4.方法Methods

将页面显示的树结构序列化

Js代码

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

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

Json代码

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

Js代码

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

Js代码

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

5.配置Configuration

Js代码

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

转载于:https://www.cnblogs.com/telwanggs/p/7667025.html

Bootstrap学习笔记之Nestable可拖拽树结构相关推荐

Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）
前言:拖拽对象是2D游戏中常用的一个功能,例如<植物大战僵尸>中种植植物的表现形式,拖拽植物卡片种植到相应的地点. 思路:在Egret中实现拖拽对象,需要用到TOUCH_MOVE事件的监听 ...
BootStrap 学习笔记（一）
BootStrap学习大纲: 1.css样式布局容器:container 1)栅格系统栅格系统就是BootStrap把一个div最多分成12列,其中主要的样式 col-md-数字用的最多,其他( ...

Bootstrap学习笔记之Nestable可拖拽树结构

Bootstrap学习笔记之Nestable可拖拽树结构相关推荐

最新文章

热门文章