`
PrisonBreak
  • 浏览: 95902 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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 

其它几个属性实在懒得翻译了,英语半吊子水平,死脑细胞太多了,改天有时间补上吧,见谅。。。

  • 描述: 截图
  • 大小: 17.3 KB
  • 大小: 27.5 KB
6
0
分享到:
评论
3 楼 n592118572 2016-05-16  
我就想问下修改删除按钮是自带的功能还是UP添加的?
2 楼 那时雨 2015-10-20  
我想问下前台是如何解析后台传递过来的json的数据生成树的。
1 楼 469957559 2015-04-13  
aec 那个是一个基于bootstrap后台管理系统的框架中的

相关推荐

    bootstrap学习笔记

    学习笔记中还包含了关于Bootstrap环境的安装指南,包括如何下载Bootstrap和理解其文件结构。作者建议使用预编译版本,以方便快捷地使用Bootstrap的样式和脚本。 Bootstrap包含大量预构建的组件和插件,使得开发者...

    bootstrap学习笔记-html5

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料,非常适合初学者入门。...

    bootstrap树结构简单实现

    在本篇文章中,我们将探讨如何使用Bootstrap构建一个简单的树结构,并结合Java和JavaScript技术来增强其功能。 首先,我们需要了解Bootstrap的核心组件,如栅格系统、排版、表单、按钮、导航等。这些组件提供了基础...

    bootstrap-table.css 表格拖拽排序

    在这个特定的场景中,`bootstrap-table.css`可能包含了拖拽排序的样式规则,如拖动行时的高亮效果、悬浮指示器等,使得交互过程更加直观。 接着,`jquery.tablednd.js`是基于jQuery的TableDnD库,实现了表格行的...

    李炎恢Bootstrap讲义笔记

    这个“李炎恢Bootstrap讲义笔记”很可能包含了李炎恢老师关于Bootstrap的深入讲解和实践指导,帮助学习者掌握这一强大的工具。 Bootstrap的核心特性包括一套丰富的预定义的CSS样式、JavaScript组件和字体图标,这些...

    实现bootstrap table可设置列宽和可拖动列宽

    总之,实现 Bootstrap Table 的列宽设置和拖动功能,需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置,我们可以为用户提供更加灵活和友好的数据查看体验。

    bootstrap框架下带搜索功能的下拉树插件.zip

    在这个“bootstrap框架下带搜索功能的下拉树插件”中,我们主要关注两个核心组件:`bootstrap-select`和`bootstrap-treeview`,它们都是Bootstrap生态系统中的扩展插件。 1. **bootstrap-select** `bootstrap-...

    bootstrap树形下拉框 下拉框树形菜单

    "bootstrap树形下拉框 下拉框树形菜单"是指在Bootstrap的上下文菜单(Dropdown)中集成一个树形结构,使得用户可以在下拉选项中进行多级选择,这种功能在数据分类或层级关系展示时非常实用。 在Bootstrap中,下拉框...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器

    标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...

    前端Bootstrap+Es6+vue学习笔记

    前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架,由 Twitter 公司的两名技术工程师研发。其主要特点包括: 1. 跨设备跨浏览器:Bootstrap 支持多种设备和浏览器,可以在不同的...

    可拖拽的bootstrap弹出窗口

    在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。 首先,`Bootstrap` 是一个...

    bootstrap框架下带搜索功能的下拉树插件

    然而,原生的`bootstrap-select`并不直接支持树形结构。因此,我们需要引入另一个库——`bootstrap-treeview`,这是一个专门用于在Bootstrap中构建树形视图的组件,它能很好地展示层级关系,但不包含下拉功能。 ...

    Bootstrap的用法学习笔记

    在"Bootstrap的用法学习笔记"中,我们将深入探讨如何有效地利用这个框架。 一、Bootstrap的基本结构 Bootstrap的核心构建块包括网格系统、排版、导航、表单、按钮、图像和其他UI元素。首先,引入Bootstrap库到HTML...

    bootstrap布局可视化可拖拽

    "bootstrap布局可视化可拖拽"这个主题指的是使用Bootstrap配合某些可视化工具或插件,实现布局元素的拖放功能,从而让开发者可以直观地调整网页布局。 Bootstrap的基础布局系统依赖于网格(Grid System),它将页面...

Global site tag (gtag.js) - Google Analytics