位置: 编程技术 - 正文
Bootstrap树形控件使用方法详解(bootstrap 树形菜单)
编辑：rootadmin推荐整理分享Bootstrap树形控件使用方法详解(bootstrap 树形菜单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:bootstrap树形下拉框,bootstrap树形下拉框,bootstrap 树形,bootstrap树状分级菜单,bootstrap tree,bootstrap 树,bootstrap tree,bootstrap 树,内容如对您有帮助，希望把文章链接给更多的朋友！
一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用，但对于节点的增删改实现起来就不容易了，如果非要做，可能需要自己去封装。
1、一睹初容
全部收起
展开一级
全部展开
2、代码示例此控件实现起来也非常简单，只需要引用jQuery和bootstrap组件即可。
这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等操作，不要急，下面的控件可能比较适用。
二、文件树编辑插件Treed
这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。
1、初见Treed
默认展开一级
点击左边的“+”号和右边的节点都会去展开子节点
多级展开
在左边可以编辑节点名称
按Enter键换行新增兄弟节点，同样删除换行就可以删除节点。
按Enter键后再按下Tab键可以新增子节点
很强大有木有。审核元素可知它使用的是html5的svg标签来实现的，所以对浏览器有一定的要求。
三、通用树形控件——zTree
ztree是一个传统的树形组件，其强大的功能决定他在树形控件界的地位。不管是树形展示，还是编辑，又或者是节点单选和多选，它都提供了强大的功能API。但是，由于它界面效果不太好看，所以很多公司使用它的时候都会有一定的犹豫。所幸，至从出了扁平化风格后，ztree也做了一定的美化，比如它的Metro风格的组件和bootstrap风格就非常相像。今天就来结合Metro风格的ztree来介绍下这个组件的一些用法。
1、组件使用
此组件可直接通过Nuget去添加。
2、组件效果
节点全部收起
节点展开
节点选中，当然如果需要可以变成单选。
可以增删改节点
点击文本框出现树
3、代码示例3.1 直接在界面显示文本框
需要引用的js和css文件
页面html
Js初始化
3.2 默认隐藏，触发某个事件的时候出现树。这种场景在项目里面非常常见，一般用于选择树节点。所以博主把这个也单独拿出来说下吧。
div默认是隐藏的。
在js里面初始化树以及注册showMenu()方法
由于以上都是静态数据，如果需要从后台取数据动态加载树节点，可以去后台构造zNodes这种结构的数组即可。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程
以上三种树形组件，各有千秋，可以根据需求选用不同的组件，希望本文所述对大家学习树形控件有所帮助。
最近新补充的一系列bootstrap基础教程，欢迎大家学习。
js+css绘制颜色动态变化的圈中圈效果 本文实例讲述了js+css绘制颜色动态变化的圈中圈效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：htmlheadtitlecircle/titlestylety
封装属于自己的JS组件 一、扩展已经存在的组件1、需求背景很多时候，我们使用jquery.ajax的方式向后台发送请求，型如$.ajax({type:"post",url:"/User/Edit",data:{data:JSON.stringify(postdata)},
不用一句js代码初始化组件 最近使用bootstrap组件的时候发现一个易用性问题，很多简单的组件初始化都需要在JS里面写很多的初始化代码，比如一个简单的select标签，因为仅仅只是
标签: bootstrap 树形菜单
本文链接地址:https://www.jiuchutong.com/biancheng/382724.html 转载请保留说明！下一篇：js+css绘制颜色动态变化的圈中圈效果(用js设置颜色)
![[Java框架-grails从基础到实践]8、集合-map(java dao框架)](https://www.jiuchutong.com/image/20240129/1706503767.jpg)
