树形菜单大集合，带checkbox，带右键菜单，重命名，动态修改等

最新推荐文章于 2023-12-28 10:10:47 发布
最新推荐文章于 2023-12-28 10:10:47 发布
阅读量1.2w 收藏 5
点赞数
分类专栏： JavaScript 文章标签： jquery插件 mootools tree jquery ajax xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/restraint/article/details/7253761
版权
zTree 
利用Jquery的核心代码，实现一套能完成大部分常用工作的Tree功能
  • 兼容 IE、FireFox、Chrome 等浏览器（对于IE 6.0的兼容问题将不做特殊维护）
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动
  • 支持任意更换皮肤（依靠css）
  • 支持极其灵活的Checkbox选择功能
  • 个性化图标
  • 简单的参数配置实现 灵活多变的功能
    zTree.png

    zTree

    树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客  jQuery plugin: Treeview 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
这个插件能够把无序列表转换成可展开与收缩的Tree。
 

jQuery plugin: Treeview

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jstree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖\放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。 

jstree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery UI Widgets  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 FileTreePanel 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能。其它还包括文件上传，重命名，删除，新建与移动。
FileTree

FileTreePanel

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 ExtJs  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery File Tree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。

jQuery File Tree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 dhtmlxTree  
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
dhtmlxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API，AJAX支持和drag-n-drop功能。

dhtmlxTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 dTree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级，可以在同一个页面中放置多个dTree，可以为每个节点指定不同的图标。

dTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Yahoo! UI Library: TreeView 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
YUI TreeView Control这个树形组件，支持通过XMLHttpRequest对象动态加载节点数据，自定义每一个节点metadata。

Yahoo! UI Library: TreeView

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 YUI  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Fonshen JS MenuTree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
风声JS菜单树,程序基于JavaScript/XHTML/CSS标准实现。支持丰富的功能/表现定制：拥有表现和数据分离，单页面可以应用多个无限级菜单树，多达4种展开模式，风格样式定义结构清晰、灵活又精细等等特性。

Fonshen JS MenuTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Menu  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Control.Treeview 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
采用Mootools开发的树形菜单控件。支持通过Ajax动态获取节点，设置默认选中某些节点。

Control.Treeview

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Mootools  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Folder Tree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
文件夹树形控件。支持利用拖放（drag and drop）操作来重新排序节点，利用Ajax更新节点。

Folder Tree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 TafelTree-view 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
TafelTree-view是一个基于Prototype与Script.aculo.us开发的树形控件。支持拖放操作，Ajax更新节点等。

TafelTree-view

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Prototype Script.aculo.us  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 DHTML Tree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
这是一个基于标准<UL>Html结构构造的Tree控件。

DHTML Tree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 dFTree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
dFTree是一个javascript+css Folder Tree支持利用Ajax技术动态新增/删除/修改节点等功能。

dFTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 CheckTree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
带Checkbox的树型jQuery插件。

CheckTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 JxLib 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
JxLib是一个基于Mootools开发的Web UI库。类似于jQuery UI、Ext JS或Dijit。拥有丰富文档和示例。提供的主要UI控件包括：
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Mif.Tree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
Mif.Tree是一个利用MooTools开发的树形菜单控件。其代码非常灵活，能够让你控制导航的每一部分如：添加新的节点；拖放节点；排序，定义显示外观等。Mif.Tree还支持通过键盘进行浏览，支持带有checkbox控件的Tree menus。

Mif.Tree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 MooTools Tree-Component 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
支持Drag&Drop操作，采用Mootools开发的树形控件。
Tree-Component.jpg

MooTools Tree-Component

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Mootools  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 JQTreeTable 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
JQTreeTable这个jQuery插件能够将普通的HTML表格转换成带有嵌有Tree控件的表格。
JQTreeTable.jpg

JQTreeTable

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Grid jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery Simple Tree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
jQuery Simple Tree是一个可拖放的树形控件。支持通过Ajax动态加载树节点，具有简单易于使用和漂亮的外观等特点。
SimpleTree.jpg

jQuery Simple Tree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 NotesForMenu 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
NotesForMenu是一个非常简单的jQuery插件用于创建多层级树形菜单，只需一行代码就能够实现。
NotesForMenu.jpg

NotesForMenu

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery 


树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 wdTree  
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点，可以配置节点属性。
tree2.jpg

wdTree

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 AdubyTree 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
AdubyTree是一个带有checkbox复选框的树形jQuery插件。
  • 支持XML和JSON两种数据格式
  • 支持本地数据和动态 AJAX远程数据。
  • 支持checkbox复选框，方便实际应用。
  • 自带basic、books、org、orguser、vista五套主题，用户可以扩展定制主题。
    AdubyTree.jpg

    AdubyTree

    树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery  

 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 Lightweight TreeList widget 
树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客
这是一个利用jQuery UI Widget Factory创建的轻量级，可换肤树形列表控件。
TreeList.jpg

Lightweight TreeList widget

树形菜单，记录一下 - 嘟嘟熊 - 嘟嘟熊的博客 jQuery 

车公庙大表哥
关注
专栏目录
HTML树型控件.zip_html格式目录树
01-09
HTML树型控件.zip
树形菜单控件
01-11 5486
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。   主页:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://
HTML&CSS中的树形结构图
Li5306的博客
05-29 7637
有两个维度影响树视图的布局: 行间距(等于文本的行高)和标记的半径。.tree{虽然我们通常使用相对单位来缩放基于文本大小的用户界面控件，但对于标记，这可能导致控件过小或过大，所以我们使用一个合理的固定大小。
elementUI-Tree 树形控件的使用
m0_65022585的博客
09-30 4005
elementUI 使用树形控件实现学院专业的显示。
JQuery之jsTree树形插件
最新发布
qq_54015925的博客
12-28 2193
jstree相关属性
dtree树形菜单(有带checkbox实现)
01-24
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
wpf实现带checkbox层级联动的树形菜单
07-07
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）来实现一个具有复选框的层级联动树形菜单。这个功能丰富的菜单不仅允许用户通过右键操作进行展开、关闭、选择和反选所有节点，而且在选择...
关于树形菜单 Checkbox的全选
10-30
js树形菜单全选
vue实现带复选框的树形菜单
10-16
在Vue.js框架中实现带复选框的树形菜单是一种常见的UI设计，通常用于显示层次结构的数据，并允许用户进行多级选择。这个例子展示了如何结合第三方库ZTree来创建这样一个功能。ZTree是一个基于JavaScript的树状菜单...
zTree从数据库中动态加载树形菜单
12-15
zTree是一款广泛应用于构建树形菜单的开源JavaScript插件，尤其适用于动态加载数据。它能够通过Ajax异步请求从数据库获取数据，实现高效且流畅的用户体验。zTree的灵活性在于其支持XML、JSON等多种数据格式，其中...
html树形菜单
07-21
html 简单树形菜单demo
Jquery easyui tree的使用
热门推荐
胡汉三
08-29 11万+
这个ui用的一切都是json数据。树也是如此！ h
用html+css+js实现一个无限级树形控件
cc_fys的博客
07-30 2万+
题目描述： 用html+css+js实现一个无限级树形控件，功能如下： 1.利用html、css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消，点击叶节点勾选图标可以选中或取消   思路： 以上是一道题的题目描述，但是树形结构是如何给出的题目并没有说明，所以每个人都有不同的想法。（自己百度了一顿也没有百度到  (⊙⊙) ） 想法： 1、假如给...
html树插件,推荐8款jQuery轻量级树形Tree插件
weixin_33226548的博客
06-17 1578
由于其拥有庞大，实用的插件库，使得jQuery变得越来越流行。今天将介绍一些最好的jQuery树形视图插件，具有扩展和可折叠的树视图。这些都是轻量级的，灵活的jQuery插件，它将一个无序列表转换为可展开和折叠的树。Treeview– Expandable and Collapsible Tree jQuery PluginjQuery Treeview是一个轻巧和灵活的jQuery插件。它将一个...
树形控件
weixin_30662539的博客
07-24 102
树形控件在做web中经常使用.今天,弄个试试.以后可以用得到. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="http://code.jquery.com/jquery.min.js">&...
html创建树控件,构建HtmlElement对象树
weixin_33334565的博客
06-08 373
这样做// On screen webbrowser controlwebBrowserControl.Navigate("about:blank");webBrowserControl.Document.Write("This will change");var elementToReplace = webBrowserControl.Document.GetElementById("div1"...
28款jQuery Tree 树形结构插件（转自：http://www.andelse.com/jquery-tree-plugins.html）
guoyiqi
02-08 1085
（1）jQuery File Tree （2）jQuery plugin: Treeview(演示地址) 这个插件能够把无序列表转换成可展开与收缩的Tree。 （3）jstree jstree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在...
html复选框树形结构,jQuery复选框树形控件wdTree
weixin_33535402的博客
06-04 460
wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点，可以配置节点属性。 var userAgent = window.navigator.userAgent.toLowerCase();$.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);$.browser.msi...
vue 实现(权限管理)带复选框(a-checkbox )的动态树形菜单
08-06
Vue可以通过使用组件以及v-model指令来实现带复选框的动态树形菜单及权限管理。下面给出一个简单的示例： 首先，需要创建一个Vue组件AcheckboxTreeMenu，该组件会渲染动态生成的树形菜单： ```html <template> <div> <ul> <li v-for="node in treeData" :key="node.id"> <a-checkbox v-model="node.checked" @change="handleNodeCheck(node)"> {{ node.name }} </a-checkbox> <AcheckboxTreeMenu :treeData="node.children"></AcheckboxTreeMenu> </li> </ul> </div> </template> <script> export default { name: "AcheckboxTreeMenu", props: { treeData: { type: Array, required: true, default: [] } }, methods: { handleNodeCheck(node) { // 处理节点被选中的逻辑 // 可根据实际需求进行权限管理的操作，例如将选中的节点信息存入数据库等 } } }; </script> ``` 然后在父组件中引用AcheckboxTreeMenu组件，并传入相应的树形菜单数据： ```html <template> <div> <AcheckboxTreeMenu :treeData="menuData"></AcheckboxTreeMenu> </div> </template> <script> import AcheckboxTreeMenu from "@/components/AcheckboxTreeMenu"; export default { name: "App", components: { AcheckboxTreeMenu }, data() { return { menuData: [ { id: 1, name: "节点1", checked: false, children: [ { id: 2, name: "子节点1", checked: false }, { id: 3, name: "子节点2", checked: false } ] }, { id: 4, name: "节点2", checked: false } ] }; } }; </script> ``` 通过以上代码，就可以实现带有复选框的动态树形菜单，并在选中复选框时触发相应的权限管理操作。可以根据实际需求，在handleNodeCheck方法中添加逻辑来处理节点被选中的操作。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值