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:
- <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学习笔记之Nestable可拖拽树结构的更多相关文章
- OpenLayers学习笔记(六)— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
- OpenLayers学习笔记(五)— 拖拽Feature图层
参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- 【转】Nestable可拖拽树
原文地址:https://blog.csdn.net/wangmj518/article/details/81746523 Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面 ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
随机推荐
- I.MX6 U-boot imxotp MAC address 写入
/***************************************************************************** * I.MX6 U-boot imxotp ...
- python3练习题四
循环 题目: 答案: #!/usr/bin/env python3 #-*- coding:utf-8 -*- L = ['Bart', 'Lisa', 'Adam'] for i in L: pri ...
- HTTP node静态资源请求加载demo
MIME type的缩写为(Multipurpose Internet Mail Extensions)代表互联网媒体类型(Internet media type),MIME使用一个简单的字符串组成, ...
- 用grep在子目录中指定的文件类型中查找(转载)
转自:http://www.ai7.org/wp/html/653.html grep -r abcd *.py 这样的命令得不到你期待的结果,而 grep -r abcd * 这样得到的结果又太多, ...
- ORACLE PL/SQL 实例精解之第五章 条件控制:CASE语句
5.1 CASE语句 1. CASE语句具有如下结构 CASE SELECTOR WHEN EXPRESSION 1 THEN STATEMENT 1; WHEN EXPRESSSION 2 THEN ...
- 洛谷P4867 Gty的二逼妹子序列(莫队+树状数组)
传送门 本来打算用主席树 然后发现没办法维护颜色数 于是用了莫队加树状数组 然后竟然A了…… //minamoto #include<iostream> #include<cstdi ...
- Python 爬虫面试题 170 道:2019 版
引言 最近在刷面试题,所以需要看大量的 Python 相关的面试题,从大量的题目中总结了很多的知识,同时也对一些题目进行拓展了,但是在看了网上的大部分面试题不是很满意,一个是有些部分还是 Python ...
- jdbc 连接 sqlserver 学习
使用sqljdbc.jar 连接sqlserver 下载网址: http://www.drv5.cn/sfinfo/8228.html#softdown package test_sql_server ...
- PJzhang:微信公众号短连接与微信好友验证
猫宁!!! 参考链接:https://mp.weixin.qq.com/s/LPuYrDEyEXHyhcK3_HokSg 之前看到他们有人把微信公众号文章的长链接转为短链接,很受用,百度搜索一下方法, ...
- scrapy 连接错误
twisted.python.failure.failure twisted.internet.error.connectionlost: connection to the other side w ...