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和理解其文件结构。作者建议使用预编译版本,以方便快捷地使用Bootstrap的样式和脚本。 Bootstrap包含大量预构建的组件和插件,使得开发者...
Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料,非常适合初学者入门。...
资源简介《HTML,CSS,Bootstrap学习笔记》是一个综合性的学习资源包,旨在帮助初学者和进阶开发者全面掌握前端开发的基础知识和技能。本资源包涵盖了HTML、CSS和Bootstrap这三个前端开发的核心领域,通过详细的笔记...
在本篇文章中,我们将探讨如何使用Bootstrap构建一个简单的树结构,并结合Java和JavaScript技术来增强其功能。 首先,我们需要了解Bootstrap的核心组件,如栅格系统、排版、表单、按钮、导航等。这些组件提供了基础...
在这个特定的场景中,`bootstrap-table.css`可能包含了拖拽排序的样式规则,如拖动行时的高亮效果、悬浮指示器等,使得交互过程更加直观。 接着,`jquery.tablednd.js`是基于jQuery的TableDnD库,实现了表格行的...
这个“李炎恢Bootstrap讲义笔记”很可能包含了李炎恢老师关于Bootstrap的深入讲解和实践指导,帮助学习者掌握这一强大的工具。 Bootstrap的核心特性包括一套丰富的预定义的CSS样式、JavaScript组件和字体图标,这些...
在这个“bootstrap框架下带搜索功能的下拉树插件”中,我们主要关注两个核心组件:`bootstrap-select`和`bootstrap-treeview`,它们都是Bootstrap生态系统中的扩展插件。 1. **bootstrap-select** `bootstrap-...
"bootstrap树形下拉框 下拉框树形菜单"是指在Bootstrap的上下文菜单(Dropdown)中集成一个树形结构,使得用户可以在下拉选项中进行多级选择,这种功能在数据分类或层级关系展示时非常实用。 在Bootstrap中,下拉框...
"bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...
标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...
总之,实现 Bootstrap Table 的列宽设置和拖动功能,需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置,我们可以为用户提供更加灵活和友好的数据查看体验。
前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架,由 Twitter 公司的两名技术工程师研发。其主要特点包括: 1. 跨设备跨浏览器:Bootstrap 支持多种设备和浏览器,可以在不同的...
在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。 首先,`Bootstrap` 是一个...
然而,原生的`bootstrap-select`并不直接支持树形结构。因此,我们需要引入另一个库——`bootstrap-treeview`,这是一个专门用于在Bootstrap中构建树形视图的组件,它能很好地展示层级关系,但不包含下拉功能。 ...
在"Bootstrap的用法学习笔记"中,我们将深入探讨如何有效地利用这个框架。 一、Bootstrap的基本结构 Bootstrap的核心构建块包括网格系统、排版、导航、表单、按钮、图像和其他UI元素。首先,引入Bootstrap库到HTML...