js树形菜单代码

合集下载

js 树状结构,输入id返回当前id节点和所有子节点

js 树状结构,输入id返回当前id节点和所有子节点1.引言1.1 概述概述部分的内容：在计算机科学中，树状结构是一种重要的数据结构，它模拟了自然界中的树形关系。

树状结构由根节点、子节点和叶节点组成，通过节点之间的连线表示它们之间的关系。

在前端开发中，JavaScript语言提供了一种简洁而强大的方式来创建和操作树状结构。

通过使用JavaScript，我们可以轻松地构建一个树形的数据结构，并可以对其中的节点进行各种操作，例如增加、删除、查找等。

本文主要介绍了如何通过JavaScript实现一个树状结构的数据结构，并提供了一个根据节点ID返回当前节点及其所有子节点的功能。

通过这个功能，我们可以方便地获取到指定节点下的所有子节点，从而实现对树状结构的有效操作。

文章的结构如下：首先，我们会对树状结构的定义和特点进行详细介绍，包括了树状结构的基本概念和重要特性。

其次，我们会介绍如何使用JavaScript来实现一个树状结构的数据结构，包括树的创建、节点的增删改查等操作。

最后，我们将总结本文的内容，并讨论树状结构在前端开发中的应用前景。

通过本文的学习，读者将对JavaScript中的树状结构有更深入的理解，并能够应用这些知识来解决前端开发中的问题。

无论是构建一个复杂的网站还是开发一个交互式的应用程序，树状结构都是一个非常有用且灵活的工具，相信本文对读者会有所帮助。

敬请期待下面的内容，让我们开始吧！1.2 文章结构文章结构部分介绍了整篇文章的组织和框架。

本文分为引言、正文和结论三个部分。

下面将对每个部分进行详细介绍。

引言部分主要介绍了本文要讨论的主题——js树状结构。

首先对树状结构的概念进行了简单的概述，接着介绍了文章的结构和目的。

通过引言，读者可以对将要阐述的内容有一个整体的了解。

正文部分是本文的核心，主要分为两个小节。

首先是对树状结构的定义和特点的介绍。

文章将从何为树状结构开始，逐步深入地解释了树状结构的各个要素和特点。

jstree 方法调用

jstree 方法调用jstree 是一种基于jQuery 的树形结构插件，可以方便地创建和管理树形结构数据。

除了基本的树形展示功能，jstree 还提供了许多方法来操作和交互树形结构数据，包括添加、删除、修改节点等。

下面是一些jstree 方法调用的示例：1. 加载树形结构数据```javascript$('#tree').jstree({'core': {'data': [{ 'text': '节点1', 'state': { 'opened': true } },{ 'text': '节点2', 'children': [ { 'text': '子节点1' }, { 'text': '子节点2' } ] },{ 'text': '节点3', 'state': { 'selected': true } }]}});```2. 添加节点```javascript$('#tree').jstree('create_node', 'parent_node_id', { 'text': '新节点' });```3. 删除节点```javascript$('#tree').jstree('delete_node', 'node_id');```4. 修改节点```javascript$('#tree').jstree('rename_node', 'node_id', '新名称'); ```5. 展开节点```javascript$('#tree').jstree('open_node', 'node_id');```6. 折叠节点```javascript$('#tree').jstree('close_node', 'node_id');```7. 选择节点```javascript$('#tree').jstree('select_node', 'node_id');```8. 取消选择节点```javascript$('#tree').jstree('deselect_node', 'node_id'); ```。

JS树结构数据的遍历

JS树结构数据的遍历树结构是一种常见的数据结构，它由若干节点组成，节点之间存在一对多的关系。

在前端开发中，经常需要遍历树结构的数据来进行处理操作。

本文将介绍几种常用的树结构数据的遍历算法。

一、深度优先遍历（DFS）深度优先遍历是一种递归的遍历算法，其核心思想是先遍历子节点，再遍历父节点。

在JavaScript中，可以使用递归函数来实现深度优先遍历。

以下是一个简单的树结构数据的遍历例子：```javascriptfunction dfs(node)console.log(node.value);if (node.children)for (let child of node.children)dfs(child);}}```在上述例子中，dfs函数用来深度优先遍历树结构数据。

它首先打印当前节点的值，然后递归调用dfs函数遍历子节点。

二、广度优先遍历（BFS）广度优先遍历是一种按层次顺序遍历节点的算法，其核心思想是先遍历同一层的节点，再遍历下一层的节点。

在JavaScript中，可以使用队列来实现广度优先遍历。

以下是一个简单的树结构数据的遍历例子：```javascriptfunction bfs(root)let queue = [root];while (queue.length > 0)let node = queue.shift(;console.log(node.value);if (node.children)for (let child of node.children)queue.push(child);}}}```在上述例子中，bfs函数用来广度优先遍历树结构数据。

它使用一个队列来保存待遍历的节点，初始时将根节点加入队列，然后循环进行以下操作：从队列中取出一个节点，打印该节点的值，将该节点的子节点加入队列。

三、前序遍历、中序遍历和后序遍历（二叉树）在二叉树中，除了深度优先遍历和广度优先遍历外，还常用以下三种特殊的遍历方式：1. 前序遍历（pre-order）：先访问根节点，再依次访问左子树和右子树。

js的tree数组对象扁平化思否_JS中树形对象与数组之间的相互转换菜单树

js的tree数组对象扁平化思否_JS中树形对象与数组之间的相互转换菜单树在⼯作中经常会遇到树形结构的对象转为数组或者数组转为树形对象的需求，那么如何实现呢？1、⾸先是要将⼀个具有树形结构的数组转化为树形结构的对象// 将⼀个扁平化的对象数组，转化为树形结构// 现在有⼀个对象组成的数组，每个元素有id属性和parent_id属性，根据其id属性和parent_id属性，将其转换为树结构的对象const arr = [{id: '1',parent_id: 'root',name:'abc'},{id: '2',parent_id: 'root',name:'abc'},{id: '1-1',parent_id: '1',name:'abc'},{id: '1-2',parent_id: '1',name:'abc'},{id: '1-1-1',parent_id: '1-1',name:'abc'},{id: '1-1-2',parent_id: '1-1',name:'abc'},{id: '1-2-1',parent_id: '1-2',name:'abc'},{id: '2-1',parent_id: '2',name:'abc'},{id: '2-2',parent_id: '2',name:'abc'},{id: '2-1-1',parent_id: '2-1',name:'abc'},{id: '2-2-1',parent_id: '2-2',name:'abc'},{id: '2-2-1-1',parent_id: '2-2-1',name:'abc'},{id: '2-2-1-2',parent_id: '2-2-1',name:'abc'},{id: '2-2-1-2-1',parent_id: '2-2-1-2',name:'abc'},{id: '2-3',parent_id: '2',name:'abc'},{id: '2-3-1',parent_id: '2-3',name:'abc'},{id: '3',parent_id: 'root',name:'abc'},];// 将这样⼀个数组，变成能够以树形展⽰的对象//先将数组中的每⼀个节点放到temp对象中（创建set）//即数组中有{id: '2-3', parent_id: '2',...}这样⼀个节点，需要将他放到temp中变成 '2-3': {id: '2-3', parent_id: '2',...}这种JSON结构//直接遍历整个temp对象，通过这句代码 temp[temp[i].parent_id].children[temp[i].id] = temp[i];//将当前⼦节点与⽗节点建⽴连接。

html js树形折叠菜单实例

html js树形折叠菜单实例HTML JS Treeview 可以帮助您在网站上创建一个树形折叠菜单。

以下是一个简单的示例：HTML代码：```html<!DOCTYPE html><html><head><title>Treeview Example</title><style>ul.treeview {list-style-type: none;padding: 0;margin: 0;}ul.treeview li {padding: 5px;position: relative;}ul.treeview li.expandable:before {content: '\25B6';position: absolute;left: -10px;}ul.treeview li.collapsible:before {content: '\25BC';position: absolute;left: -10px;}ul.treeview li ul {display: none;margin-left: 20px;}</style></head><body><ul class="treeview"><li class="expandable">Item 1<ul><li>Sub-item 1</li><li>Sub-item 2</li><li>Sub-item 3</li></ul></li><li class="expandable">Item 2<ul><li>Sub-item 1</li><li>Sub-item 2</li></ul></li><li>Item 3</li></ul><script>var expandableItems = document.querySelectorAll('.expandable');for (var i = 0; i < expandableItems.length; i++) {expandableItems[i].addEventListener('click', function() {var submenu = this.querySelector('ul');if (submenu.style.display === "block") {submenu.style.display = "none";this.classList.remove('collapsible');this.classList.add('expandable');} else {submenu.style.display = "block";this.classList.remove('expandable');this.classList.add('collapsible');}});}</script></body></html>```上述示例中，我们首先在`<ul>`元素上添加了一个名为`treeview`的类。

树形菜单jsTree使用方法

树形菜单jsTree使⽤⽅法jsTree版本：3.0.4在 MVC中使⽤jsTreeModel：public class Department{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }}数据库：Controller：jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。

对于⼩的菜单可以⼀次性加载完，如果节点很多，可以按需加载（lazy loading）。

1、⼀次性加载完所有节点public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* ⼀次性加载完所有节点.* 前端只需配置 'data': {'url': '/Home/GetTreeData','dataType': 'json'* } 不⽤给服务端传值* 服务端不需写where*/var items=from item in db.Departmentselect new{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = };return Json(items, JsonRequestBehavior.AllowGet);}2、按需加载节点（lazy loading）public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* 异步加载节点（按需）前端需提供id传给服务端：'data': function (node) {return { id: node.id };}后端要在linq中加where筛选*/var items=from item in db.Departmentwhere item.PId == clickId // 在服务端要把所有上级节点找出来select new// 匿名类可以添加需要的字段，⽐如HasChildren{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = ,children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有⼦项};return Json(items, JsonRequestBehavior.AllowGet);}View：<div id="jstree">@section scripts{<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet"/><script src="~/Scripts/jstree/jstree.js"></script><script>$(document).ready(function () {$("#jstree").jstree({"core": {//'initially_open':["abc"],'data': {'url': '/Home/GetTreeData','dataType': 'json','data': function (node) { // 传给服务端点击的节点//return { id: node.id == "#" ? "0" : node.id };return { clickId: node.id };},success: function () {//alert('ok');}}}});// 展开节点$("#jstree").on("loaded.jstree", function (event, data) {// 展开所有节点//$('#jstree').jstree('open_all');// 展开指定节点//data.instance.open_node(1); // 单个节点（1 是顶层的id）data.instance.open_node([1, 10]); // 多个节点 (展开多个⼏点只有在⼀次性装载后所有节点后才可⾏） });// 所有节点都加载完后$("#jstree").on("ready.jstree", function (event, data) {//alert('all ok');data.instance.open_node(1); // 展开root节点//// 隐藏根节点 /questions/10429876/how-to-hide-root-node-from-jstree$("#1_anchor").css("visibility", "hidden");$("li#1").css("position", "relative")$("li#1").css("top", "-20px")$("li#1").css("left", "-20px")$(".jstree-last .jstree-icon").first().hide();});// 获得点击节点的id$('#jstree').on("changed.jstree", function (e, data) {console.log("The selected nodes are:");console.log(data.selected);alert('node.id is:' + data.node.id);alert('node.text is:'+data.node.text);console.log(data);// TODO: 传递给Tab//$.ajax({// 'url': 'Home/GetTreeData/',// 'data': { 'id': data.node.id }//});});});// end ready</script>根节点的⽗项是0，根节点只有⼀个，似乎显⽰出来也不好看：所以我们把它隐藏起来：PS:ready 和loaded 的区别：loaded.jstree: triggered after the root node is loaded for the first timeready.jstree : triggered after all nodes are finished loading参考：--End--。

树形菜单导航源代码

简洁的多级树形导航菜单1、xhtml部分<ul id="menuList"><li class="menubar"><a href="#" id="productsActuator" class="actuator">我的收藏夹</a><ul id="productsMenu" class="menu"><li><a href="#" id="newPhonesActuator" class="actuator">个人网站</a> <ul id="newPhonesMenu" class="submenu"><li><a href="/">网页代码库</a></li><li><a href="/">网页设计师</a></li><li><a href="/">JunChen博客</a></li> <li><a href="/andy/">毅博客</a></li></ul></li><li><a href="#" id="compareActuator" class="actuator">国外网站</a><ul id="compareMenu" class="submenu"><li><a href="/">A List Apart</a></li><li><a href="/">CSS禅意花园</a></li><li><a href="/">456 Berea Street</a></li><li><a href="/">W3C网站</a></li></ul></li></ul></li></ul>2、css部分#menuList {margin: 0px;padding: 10px 0px 10px 15px;border: 1px solid #CCC;width: 203px;background-color: #EEE;color: #000;font-family: verdana, helvetica, arial, sans-serif; }li.menubar {font-size: 12px;line-height: 1.8em;list-style: none;}.menu, .submenu {display: none;margin-left: 15px;padding: 0px;}.menu li, .submenu li {list-style: none;}#menuList a {background-color: transparent;color: #000;font-size: 12px;margin-left: 15px;text-decoration: none;}#menuList a:hover {text-decoration: underline;}3、Javascript部分if (!document.getElementById) {document.getElementById = function() { return null; } }function initializeMenu(menuId, actuatorId) {var menu = document.getElementById(menuId);var actuator = document.getElementById(actuatorId);if (menu == null || actuator == null) return;actuator.onclick = function() {var display = menu.style.display;menu.style.display = (display == "block") ? "none" : "block"; return false;}}window.onload = function() {initializeMenu("productsMenu", "productsActuator");initializeMenu("newPhonesMenu", "newPhonesActuator");initializeMenu("compareMenu", "compareActuator");}简洁的双级导航菜单1、xhtml部分源代码：<ul id="butong-nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li></ul>2、css部分源代码#butong-nav, #butong-nav ul {font: normal 11px verdana;margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #CCC;}#butong-nav li {position: relative;}#butong-nav ul {position: absolute;left: 149px;top: 0;display: none;}#butong-nav li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;}#butong-nav li a:hover {text-decoration: underline;}* html #butong-nav li {float: left;height: 1%;}* html #butong-nav li a {height: 1%;}#butong-nav li:hover ul, #butong-nav li.over ul {display: block;}3、Javascript部分源代码startList = function() {if (document.all && document.getElementById) {navRoot = document.getElementById("butong-nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName == "LI") {node.onmouseover = function() {this.className += "over";}node.onmouseout = function() {this.className = this.className.replace("over", ""); }}}}}window.onload = startList;。

el-tree-v2 用法

el-tree-v2 用法ElTree-v2是一款基于Vue.js的可折叠树形控件，适用于展示和管理大量层级数据的场景。

通过将数据以树形结构展示，用户可以方便地浏览和操作层级关系。

下面是关于el-tree-v2的正确用法以及一些拓展功能：用法：1.安装el-tree-v2：在项目中引入el-tree-v2的库文件（如el-tree-v2.js或el-tree-v2.min.js）。

2.在Vue组件中使用el-tree-v2：在需要展示树形结构的组件中，引入el-tree-v2组件。

3.设置数据：将需要展示的层级数据传递给el-tree-v2组件的data属性。

4.配置树形结构：通过设置el-tree-v2组件的props来控制树形结构的展示效果，如节点图标、默认展开等。

5.处理节点操作：通过监听el-tree-v2组件的事件或自定义相关方法来处理用户对节点的操作，如展开/折叠节点、选择节点、编辑节点等。

拓展：1.异步加载：如果数据较大或需要从后端获取，可以使用el-tree-v2的lazy属性来实现异步加载节点数据。

通过监听展开事件，在展开节点时动态获取数据并更新节点状态。

2.右键菜单：为el-tree-v2组件的节点绑定右键菜单，通过监听右键菜单事件来处理相关操作。

可以使用Vue的自定义指令（v-contextmenu）或其他插件来实现。

3.拖拽排序：可将el-tree-v2组件的节点设置为可拖拽，并监听拖拽事件来实现节点的拖拽排序功能。

可以使用Vue的拖拽插件（如vue-draggable）来简化实现。

4.树的搜索：为el-tree-v2组件添加搜索框，通过监听搜索事件对树进行过滤，只显示匹配的节点。

可以使用Vue的计算属性或其他过滤函数来实现。

5.节点自定义渲染：el-tree-v2组件提供了插槽（slot）来自定义节点的渲染内容，可以根据需求灵活定制节点的显示方式，如添加按钮、图标等。

总结来说，el-tree-v2是一个功能强大且易于使用的树形控件，适用于展示和管理层级数据。

Bootstrap框架建立树形菜单（Tree）的实例代码

Bootstrap框架建⽴树形菜单（Tree）的实例代码这⾥的Tree指的是树形菜单，这篇⽂章通过⼀个实例来讲解⼀下，在Bootstrap框架下怎么去建⽴⼀个树形菜单。

前提：先添加Bootstrap和JQ的引⽤<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" ><script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script><script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>HTML CODE<div class="tree well"><ul><li> <span><i class="icon-folder-open"></i> 廊坊师范学院</span><ul><li> <span><i class="icon-minus-sign"></i> 教育学院</span><ul><li> <span><i class="icon-leaf"></i> 学前教育</span> </li></ul></li><li> <span><i class="icon-minus-sign"></i> 物电学院</span><ul><li> <span><i class="icon-leaf"></i> 电⽓⼯程技术</span> </li><li> <span><i class="icon-minus-sign"></i> 电⼦信息科学技术</span><ul><li> <span><i class="icon-minus-sign"></i> 电⼦⼀班</span><ul><li> <span><i class="icon-leaf"></i> 宋笑</span> </li><li> <span><i class="icon-leaf"></i> ⼆盟</span> </li></ul></li><li> <span><i class="icon-leaf"></i> 电⼦⼆班</span> </li></ul></li><li> <span><i class="icon-leaf"></i> 物理学</span> </li></ul></li></ul></li></ul></div>CSS CODE（为树形菜单添加样式，使其符合Bootstrap框架的风格）.tree {min-height:20px;padding:19px;margin-bottom:20px;background-color:#fbfbfb;border:1px solid #999;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}.tree li {list-style-type:none;margin:0;padding:10px 5px 0 5px;position:relative}.tree li::before, .tree li::after {content:'';left:-20px;position:absolute;right:auto}.tree li::before {border-left:1px solid #999;bottom:50px;height:100%;top:0;width:1px}.tree li::after {border-top:1px solid #999;height:20px;top:25px;width:25px}.tree li span {-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #999;border-radius:5px;display:inline-block;padding:3px 8px;text-decoration:none}.tree li.parent_li>span {cursor:pointer}.tree>ul>li::before, .tree>ul>li::after {border:0}.tree li:last-child::before {height:30px}.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {background:#eee;border:1px solid #94a0b4;color:#000}JS CODE<script type="text/javascript">//为节点添加展开，关闭的操作$(function(){$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');$('.tree li.parent_li > span').on('click', function (e) {var children = $(this).parent('li.parent_li').find(' > ul > li');if (children.is(":visible")) {children.hide('fast');$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else {children.show('fast');$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); }e.stopPropagation();});});</script>效果：⼀棵符合Bootstrap风格的树就这么建造完成了，优点⾃不⽤说：整洁，美观。

js实现树级递归，通过js生成tree树形菜单（递归算法）

} const treeData = toTreeByRecursion(jsonData, 'id', 'parentId', null, 'children', treeOption) console.log(treeData)
说明：
parentIdNoneValue 父级标识空值这个参数如果跟你数据无父级时的值不一致时，就配置这个参数。比如：这里默认值为null，你根节点parentId的值为-1或''。 treeOption 参数可以不传，如果要绑定tree树形控件（一般都会有key、value、title这三个字段），那就需要配置这个参数，如果参数默认的配置跟你的不一样，那就通过参数覆盖的方式重新定义。 treeOption 的三个绑定字段是指绑定你数据中的字段，实质就是把原数据字段绑定的tree树形控件需要的三个字段key、value、title。想到了再补充。。。
return parent[parentIdField] === parentIdNoneValue // 返回第一层 }) }
使用示例：
var jsonData = [ { id: '1', name: '1', parentId: null, rank: 1 }, { id: '2', name: '1-1', parentId: '1', rank: 1 }, { id:ห้องสมุดไป่ตู้'3', name: '1-2', parentId: '1', rank: 1 },
const treeOption = { enable: false, // 是否开启转tree插件数据 keyField: 'key', // 标识字段名称 valueField: 'value', // 值字段名称 titleField: 'title', // 标题字段名称 keyFieldBind: 'id', // 标识字段绑定字段名称 valueFieldBind: 'id', // 值字段名称绑定字段名称 titleFieldBind: 'name' // 标题字段名称绑定字段名称

JSP树形菜单根据数据库默认选择

List alist = TreeUtil.retrieveNodeInfos();
// TreeInfo info = null;
// for(Iterator i = c.iterator();i.hasNext();){
// info = (TreeInfo)i.next();
Tree[1] = "2|1|Page 1.1|#";
Tree[2] = "3|1|Page 1.2|#";
Tree[3] = "4|3|Page 1.2.1|#";
Tree[4] = "5|1|Page 1.3|#";
Tree[5] = "6|2|Page 1.1.1|#";
JSP树形菜单的实现(转载)
(2009-04-20 15:21:03)
转载
标签：
杂谈分类：技术讲解
1。原理简介
dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。下载目录：/javascripts/tree/
String userPwd = "root";
String url = "jdbc:mysql://" + host + port + "/" + serverID ;
Connection conn = null ;
PreparedStatement ps = null;
contents.append(i);
contents.append("]=\"");

jsp树形菜单完整代码及截图

<html><head><style>#d1{width:200;height:400;background-color:#cccccc;border:2px solid black;left:30;top:30;position:absolute;}#d1_head{height:30;background-color:blue;color:white;font-size:20pt;}#d1_body{background-color:#cccccc;}.list li{list-style-type:none}.image image:向下.png;</style><script>function doAction(index){var obj = document.getElementById('u' + index);if(obj.style.display == 'none'){obj.style.display = 'block';if(index=='1'){document.getElementById("img1").src='向下.png';}else{document.getElementById("img2").src='向下.png';}}else{obj.style.display = 'none';if(index=='1'){document.getElementById("img1").src='向右.png';}else{document.getElementById("img2").src='向右.png';}}}function test(){var obj = document.getElementById('l1');alert(obj.innerHTML);}</script></head><body style="font-size:20pt;"><div id="d1"><div id="d1_head">树形菜单</div><ul class="list"><li><span onclick="doAction(1);"><img src="向右.png" id="img1"/>羽绒专区</span> </li><ul style="display:none;" id="u1"><li><a href="#">羽绒服</a></li><li><a href="#">羽绒夹克</a></li></ul><li><span onclick="doAction(2);"><img src="向右.png" id="img2"/>靴子专区</span> </li><ul style="display:none;" id="u2"><li><a href="#">雪地靴</a></li><li><a href="#">登山靴</a></li></ul></ul></div></div></body></html>下载两个指向不同的小图标用于区分。

js 树状结构,输入id返回当前id节点和所有子节点 -回复

js 树状结构,输入id返回当前id节点和所有子节点-回复"js树状结构，输入id返回当前id节点和所有子节点"在JavaScript中，树状结构是一种常用的数据结构，它由节点和边组成，其中每个节点可以包含一个或多个子节点。

在本文中，我们将深入探讨如何使用JavaScript编写一个函数，该函数接受一个id作为输入，并返回该id节点及其所有子节点。

一、了解树状结构在计算机科学中，树状结构是一种层级结构的数据结构，其中树的顶部被称为根节点，每个节点都可以有一个或多个子节点。

每个节点之间通过边进行连接，形成一个树形的层次关系，这使得我们可以轻松地对节点进行遍历和操作。

二、实现树状结构首先，我们需要定义一个节点类，该类包含节点的id和子节点的数组。

以下是一个基本的节点类的伪代码示例：class Node {constructor(id) {this.id = id;this.children = [];}}现在，我们可以使用Node类构建一个树状结构。

我们可以通过将根节点与其他节点连接，形成一个复杂的层次结构。

以下是一个示例树的代码示例：const rootNode = new Node(1);const node2 = new Node(2);const node3 = new Node(3);const node4 = new Node(4);const node5 = new Node(5);rootNode.children.push(node2);rootNode.children.push(node3);node2.children.push(node4);node3.children.push(node5);现在，我们已经建立了一个包含rootNode、node2、node3、node4和node5的树。

接下来，我们将进一步实现函数，以返回给定id节点及其所有子节点。

多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法)

多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）一、问题研究的背景和意义在Web应用程序开发领域，基于AJAX技术的JavaScript树形控件已经被广泛使用，它用来在Html页面上展现具有层次结构的数据项。

目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件，例如JQuery、Dojo、Yahoo UI、Ext JS等，还有一些独立的树形控件，例如dhtmlxtree等，这些树形控件完美的解决了层次数据的展示问题。

展示离不开数据，树形控件主要利用AJAX技术从服务器端获取数据源，数据源的格式主要包括JSON、XML等，而这些层次数据一般都存储在数据库中。

“无限级树形菜单”，顾名思义，没有级别的限制，它的数据通常来自数据库中的无限级层次数据，这种数据的存储表通常包括id和parentId这两个字段，以此来表示数据之间的层次关系。

现在问题来了，既然树形控件的数据源采用JSON或XML等格式的字符串来组织层次数据，而层次数据又存储在数据库的表中，那么如何建立起树形控件与层次数据之间的关系，换句话说，如何将数据库中的层次数据转换成对应的层次结构的JSON或XML格式的字符串，返回给客户端的JavaScript 树形控件？这就是我们要解决的关键技术问题。

本文将以目前市场上比较火热的Ext JS框架为例，讲述实现无限级树形菜单的方法，该方法同样适用于其它类似的JS树形控件。

Ext JS框架是富客户端开发中出类拔萃的框架之一。

在Ext的UI控件中，树形控件无疑是最为常用的控件之一，它用来实现树形结构的菜单。

TreeNode用来实现静态的树形菜单，AsyncTreeNode用来实现动态的异步加载树形菜单，后者最为常用，它通过接收服务器端返回来的JSON格式的数据，动态生成树形菜单节点。

动态生成树有两种思路：一种是一次性生成全部树节点，另一种是逐级加载树节点（利用AJAX，每次点击节点时查询下一级节点）。

BootStrapJstree树形菜单的增删改查的实现源码

BootStrapJstree树形菜单的增删改查的实现源码1.⾸先需下载jstree的插件点击打开链接2.在页⾯引⼊插件js⽂件css⽂件<link rel="stylesheet" href="plugins/jstree/themes/classic/style.css" rel="external nofollow" ><script type="text/javascript" src="plugins/jstree/_lib/jquery.js"></script><script type="text/javascript"src="plugins/jstree/_lib/jquery.cookie.js"></script><script type="text/javascript"src="plugins/jstree/_lib/jquery.hotkeys.js"></script><script type="text/javascript" src="plugins/jstree/jquery.jstree.js"></script>3.初始化控件1）html<div id="demo2" class="demo" style="height:100px;"></div>2）js 使⽤ demo2来初始化树形控件<script type="text/javascript" class="source below">$(function() {$("#demo2").jstree({"json_data" : {"ajax" : {"url" : "http://localhost:8080/MemberManager/DepartmentTreeJson","data" : function(n) {// the result is fed to the AJAX request `data` optionreturn {"operation" : "get_children","id" : n.attr ? n.attr("id").replace("node_",""): 1};}}},"plugins" : ["themes","json_data","ui","crrm","contextmenu","search" ],}).bind("loaded.jstree",function(event, data) {}).bind("select_node.jstree",function(event, data) {if (data.rslt.obj.attr("id") != undefined) {}}).bind("remove.jstree",function(e, data) {data.rslt.obj.each(function() {$.ajax({async : false,type : 'POST',url : "http://localhost:8080/MemberManager/CreateNodeForDepartment",data : {"operation" : "remove_node","id" : this.id.replace("node_", "")},success : function(r) {if (!r.status) {data.inst.refresh();}}});});}).bind("remove.jstree",function(e, data) {data.rslt.obj.each(function() {$.ajax({async : false,type : 'POST',url : "http://localhost:8080/MemberManager/CreateNodeForDepartment", data : {"operation" : "remove_node","id" : this.id.replace("node_","")},success : function(r) {if (!r.status) {data.inst.refresh();}}});});}).bind("create.jstree",function(e, data) {$.post("http://localhost:8080/MemberManager/CreateNodeForDepartment",{"operation" : "create_node","id" : data.rslt.parent.attr("id").replace("node_",""),"position" : data.rslt.position,"title" : ,"type" : data.rslt.obj.attr("rel")},function(r) {if (r.status) {$(data.rslt.obj).attr("id", "node_" + r.id);} else {data.inst.refresh();$.jstree.rollback(data.rlbk);}});}).bind("rename.jstree",function(e, data) {$.post("http://localhost:8080/MemberManager/CreateNodeForDepartment",{"operation" : "rename_node","id" : data.rslt.obj.attr("id").replace("node_",""),"title" : data.rslt.new_name},function(r) {if (!r.status) {data.inst.refresh();$.jstree.rollback(data.rlbk);}});})// 1) the loaded event fires as soon as data is parsed and inserted// 2) but if you are using the cookie plugin or the core `initially_open` option:.one("reopen.jstree",function(event, data) {})// 3) but if you are using the cookie plugin or the UI `initially_select` option:.one("reselect.jstree",function(event, data) {});});</script></pre>4.代码解析<p></p><p><pre name="code" class="java">import java.util.List;public class Department {// 部门idprivate String departmentid;// 部门名称private String name;// ⽗级部门IDprivate String parentid;//同级之间的排序。

Vue.js组件tree实现无限级树形菜单

Vue.js组件tree实现⽆限级树形菜单分享⼀段⽤ <ul>和<li>标签实现tree的代码,可能写的不是很好,如果⼤家有更好的希望分享下。

代码看这⾥喽:html代码:<div class="tree"><nav class='navbar'><ul class='nav nav-stacked'><template v-for='item in menus'><li role='presentation' v-if='!item.children'><a href="#">{{item.text}}</a></li><li role='presentation' v-if='item.children'><a href="#" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a> <ul v-show='item.expanded' class="childs"><li v-for='child in item.children'><a href="#">{{child.text}}</a></li></ul></li></template></ul></nav></div>js代码:methods: {toggleChildren: function(item) {item.expanded = !item.expanded;},},data() {return {menus:[{text:'⽔果',expanded:false,children:[{text:'苹果',},{text:'荔枝'},{text:'葡萄'},{text:'⽕龙果'}]},{text:'好吃的',expanded:false,children:[{text:'糖',},{text:'⾯包'},{text:'⽕腿'},{text:'薯⽚'},{text:'碎碎⾯'}]},{text:'饮料',expanded:false,children:[]}]}},效果图：本⽂已被整理到了《》，欢迎⼤家学习阅读。

如何将JavaScript将数组转为树形结构

如何将JavaScript将数组转为树形结构1.需求后台给了⼀个这样的数据让咱前端去转换为树形结构（没有重复数据）。

不多说，先来看看给了⼀个怎样的数组数据，转换为怎样的树形结构。

服务器传过来的数组const arr = [[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中⼼"}],[{"deptId":"D083","deptName":"⾳乐事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术⼯程事业部"},{"deptId":"D027048002","deptName":"项⽬管理中⼼"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术⼯程事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术⼯程事业部"}]]最终转换为const arr = [{deptId: 'D019',deptName: '销售部',children: [{deptId: 'D019101',deptName: '华北销售中⼼',children: [],}]},{deptId: 'D083',deptName: '⾳乐事业部',children: []},{deptId: 'D027',deptName: '杭州研究院',children: [{deptId: 'D027048',deptName: '技术⼯程事业部',children: [{deptId: 'D027048002',deptName: '项⽬管理中⼼',children: []}]}]},]2.上代码（在reactHooks中开发）const [treeData, setTreeData] = useState([]);console.log(treeData); //treeData为最终需要的树形结构，（在我本地浏览器打印出来是正确的）useEffect(() => {const str = '[[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中⼼"}],[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中⼼"}],[{"deptId":"D083","deptName":"⾳乐事业部"}],[{"deptId":"D027"," const arr = JSON.parse(str).flat(); //扁平化let newArr = [];noRepeat(arr).length && noRepeat(arr).forEach(it => {appendChild(it, newArr);});}, [])const noRepeat = (arr) => { //去重let newobj = {};return arr.reduce((preVal, curVal) => {newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal);return preVal}, []);}const appendChild = (item, newArr) => {if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //所有⼀级部门newArr.push({deptId: item.deptId,deptName: item.deptName,children: [],});setTreeData(newArr);}else {appendOtherChild(item, newArr);}}const appendOtherChild = (item, newArr) => {newArr.map(it => {if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) {it.children.push({deptId: item.deptId,deptName: item.deptName,children: [],})}else {appendOtherChild(item, it.children);}});setTreeData(newArr);}总结可能这些数据和你的不太⼀样，但是逻辑可能⼋九不离⼗，可以好好看⼀下这⼏⼗⾏代码到此这篇关于如何将JavaScript将数组转为树形结构的⽂章就介绍到这了,更多相关JavaScript数组转为树形结构内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

menu-tree多层嵌套的用法

menu-tree多层嵌套的用法menu-tree多层嵌套的用法可能因不同的框架和库而异，但通常需要使用递归或树形结构来处理菜单的嵌套关系。

以下是一个示例，展示了如何使用递归在JavaScript中构建多层嵌套的菜单树：```javascriptconst menuData = [{id: 1,name: '菜单1',parentId: 0,children: [{id: 2,name: '子菜单1',parentId: 1,children: [{id: 3,name: '子菜单1.1',parentId: 2,},],},{id: 4,name: '子菜单2',parentId: 1,},],},{id: 5,name: '菜单2',parentId: 0,},];function buildMenuTree(menuData) { const menuTree = [];for (const menu of menuData) {if (menu.parentId === 0) {menuTree.push(menu);} else {const parentMenu = findMenuById(menuData, menu.parentId);if (parentMenu) {parentMenu.children.push(menu);}}}return menuTree;}function findMenuById(menuData, id) {for (const menu of menuData) {if (menu.id === id) {return menu;} else if (menu.children) {const child = findMenuById(menu.children, id);if (child) {return child;}}}return null;}```在这个示例中，`menuData`是一个包含菜单数据的数组，每个菜单对象都有一个`id`、`name`和`parentId`属性。

element plus tree v2 js写法

Element Plus 是一个基于Vue 3.0 的组件库，Tree V2 是其中的一个树形控件组件。

以下是使用Element Plus 的Tree V2 组件的基本JavaScript 写法：首先，确保你已经安装了Vue 3.x 和Element Plus，然后在你的Vue 组件中引入Tree V2 组件：```javascriptimport { ElTree } from 'element-plus';export default {components: {ElTree,},// ...}```然后在你的模板中使用Tree V2 组件：```html<template><el-tree :data="treeData" ref="treeRef"></el-tree> </template>```在你的数据中定义树形数据：```javascriptexport default {data() {return {treeData: [{id: 1,label: 'Level one 1',children: [{ id: 4, label: 'Level two 1-1' },{ id: 5, label: 'Level two 1-2' },],},{ id: 2, label: 'Level one 2' },{ id: 3, label: 'Level one 3' },],};},// ...}```这样就可以在Vue 项目中使用Element Plus 的Tree V2 组件了。

当然，你还可以通过`ref` 来访问和操作组件实例。

例如，你可以通过`this.$refs.treeRef` 来访问树形组件的实例。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

a {text-decoration:none;}a,a:visited {color:#000;background:inherit;}body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}dd {margin:0 0 0 15px;}h4 {margin:0;padding:0;font-size:18px;text-align:center;}p {margin:0;padding:0 0 0 18px;}p a,p a:visited {color:#00f;background:inherit;}/*CNLTreeMenu Start*/.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}.CNLTreeMenu ul {padding:0;}.CNLTreeMenu li {list-style:none;padding:0;}.Closed ul {display:none;}.Child img.s {background:none;cursor:default;}#CNLTreeMenu1 ul {margin:0 0 0 17px;}#CNLTreeMenu1 img.s {width:20px;height:15px;}#CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;}#CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;}#CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;}#CNLTreeMenu2 ul {margin:0 0 0 17px;}#CNLTreeMenu2 img.s {width:17px;height:15px;}#CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;}#CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;}#CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;}#CNLTreeMenu3 ul {margin:0 0 0 17px;}#CNLTreeMenu3 img.s {width:34px;height:18px;}#CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;}#CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;}#CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;}/*CNLTreeMenu End*//*Temp CSS for View Demo*/#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}#CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;}.ViewCode {clear:both;border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;}.ViewCode h6 {color:#00f;}function Ob(o){var o=document.getElementById(o)?document.getElementById(o):o;return o;}function Hd(o) {Ob(o).style.display="none";}function Sw(o) {Ob(o).style.display="";}function ExCls(o,a,b,n){var o=Ob(o);for(i=0;i<n;i++) {o=o.parentNode;}o.className=o.className==a?b:a;}function CNLTreeMenu(id,TagName0) {this.id=id;this.TagName0=TagName0==""?"li":TagName0;this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {this.ClassName0=ClassName0;this.ClassName1=ClassName1;this.ClassName2=ClassName2;this.ImgUrl=ImgUrl || "css/s.gif";this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";for (i=0;i<this.AllNodes.length;i++ ) {this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.I mgBlankA)+this.AllNodes[i].innerHTML;}}this.SetNodes = function (n) {var sClsName=n==0?this.ClassName0:this.ClassName1;for (i=0;i<this.AllNodes.length;i++ ) {this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;}}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" lang="zh-cn"><head><title>CNL Tree Menu Ver1.02 - 无限级树形菜单Written by CNLei, 枫岩</title><meta http-equiv="content-type" content="text/html;charset=gb2312" /><meta name="generator" content="editplus" /><meta name="author" content="CNLei,枫岩," /><meta name="keywords" content="CSS Menu,树形菜单,CNLei" /><meta name="description" content="" /><link type="text/css" rel="stylesheet" href="css/css4cnltreemenu.css" /><script type="text/javascript" src="js/js4cnltreemenu.js"></script></head><body><p>实例演示：</p><dl><dt>CNL Tree Menu <small>Ver1.02</small></dt><dd><strong>Author</strong>：CNLei,枫岩</dd><dd><strong>MySite</strong>：<a href="" style="color:#00f;"></a>, <a href="" style="color:#00f;"></a></dd><dd><strong>E-Mail</strong>：cnlei.y.l<span style="color:#00f">#</span> (请将<span style="color:#00f">#</span>换成<span style="color:#00f">@</span>)</dd><dd><strong>Intro</strong>：<ol><li>"CNL Tree Menu"为无限级树形，兼容以下版本的浏览器：IE5.0+, FF1.06+, Opera8.5+ ……</li><li>HTML,CSS,JavaScript代码相互分离(即数据，风格，脚本三者分离)，可应用于多种场合，易于维护修改；更换树形图标，只需要修改CSS文件.</li><li>通过W3C校验(XHtml1-Strict,CSS1.0). </li><li>最后更新：2006-2-13 </li><li>下载地址：<a href="/mycode/CNLTreeMenu/CNLTreeMenuVer1.0.2.rar">点击下载</a> </li></ol></dd></dl><div class="CNLTreeMenu" id="CNLTreeMenu1"><h4>CNL Tree Menu1</h4><p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><div class="CNLTreeMenu" id="CNLTreeMenu2"><h4>CNL Tree Menu2</h4><p><a id="AllOpen_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><aid="AllClose_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li><li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><div class="CNLTreeMenu" id="CNLTreeMenu3"><h4>CNL Tree Menu3</h4><p><a id="AllOpen_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li><li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><script type="text/javascript"></script></body></html>。