最近公司要求实现一个动态载入的树型菜单,第一次打开页面时载入第一层节点,点先第一层任意节点后用Ajax去动态加载该节点下的子节点,在网上找来找去没有找到合适的,最后决定用一个做得不错的树菜单来改版,在没有灵感的情况下,折腾了几天总算弄出点样来,放上来请各位大虾指点一下..谢谢~~
原树模型请参考： http://www.destroydrop.com/javascripts/tree/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example dTree</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/emistree.js"></script>
</head>
<body>
<h2>
Example
</h2>
<p>
<a href="javascript: d.openAll();">open all</a> |
<a href="javascript: d.closeAll();">close all</a>
</p>
<div id="myTree" class="dtree"></div>
<script type="text/javascript">
<!--
var d = new dTree('d');
var s=new Date().getTime();
var d = new dTree('d');
d.config.drawObj = document.getElementById('myTree');
//d.config.folderLinks=false;
d.config.useCookies=false;
//d.config.useLines=false;
d.config.url='data.jsp'
d.config.target='right';
d.add({id:'0',pid:'-1',name:'My example tree',hasChild:true });
d.add({id:'1',pid:'0',name:'Node 1',hasChild:true });
d.add({id:'2',pid:'0',name:'Node 2',hasChild:true });
d.add({id:'3',pid:'0',name:'Node 3',hasChild:true });
d.add({id:'4',pid:'1',name:'Node 1.1',url:'example01.html' });
d.add({id:'5',pid:'1',name:'Node 1.2',url:'example01.html' });
d.add({id:'6',pid:'1',name:'Node 1.3',hasChild:true });
d.add({id:'7',pid:'6',name:'Node 1.3.1',url:'example01.html' });
d.add({id:'8',pid:'6',name:'Node 1.3.2',url:'example01.html' });
d.render();
//-->
</script>
</body>
</html>
分享到：
相关推荐
在本主题“树型菜单AJAX实现”中，我们将探讨如何利用AJAX来动态加载和操作树型菜单。 1. **AJAX基础** AJAX的核心是JavaScript的XMLHttpRequest对象，它允许在后台与服务器交换数据并更新部分网页，而无需重新...
Ajax动态树型菜单是一种常见的网页交互元素，常用于网站导航或数据分类展示。它结合了Ajax（异步JavaScript和XML）技术，使得菜单项能够实时更新，无需每次操作都刷新整个页面，从而提供了更好的用户体验。在本文中...
【标题】"精美的ajax树型菜单" 描述了一个利用AJAX技术实现的交互式树状菜单，这种菜单设计能够提供动态加载数据的功能，提升用户体验。在网页设计中，树型菜单通常用于组织大量层级结构的数据，使得用户可以便捷地...
总结来说，"ajax动态生成树型菜单"是一个典型的前后端交互实例，它结合了Ajax的异步特性、Struts2的MVC架构以及Dojo的UI组件能力。这个过程涉及到了数据库设计、服务器端编程、客户端脚本以及UI交互等多个环节，展示...
总的来说，"JSP+Ajax无刷新树型菜单数据库版"是一个结合了前后端技术的实例，展示了如何利用JSP构建用户界面，通过Ajax实现动态数据加载，同时利用SQL管理数据库，从而提供了一个高效、交互性强的树型菜单系统。...
该 树型菜单是针对权限管理而写的，为了方便用JAVA来写了一个动态生成树型菜单。这个可以帮助你更好地进行权限控制管理。
如压缩包中的“dhtml-tree-menu-200”，这可能是一个JavaScript库，专门用于创建动态的、交互式的树型菜单。JavaScript允许动态地创建和修改DOM元素，实现菜单的展开和折叠，同时还可以处理用户的交互事件。CSS则...
要创建一个Ajax动态树型菜单，我们需要以下几个关键步骤： 1. **HTML结构**：创建基本的HTML结构，用于显示菜单项。这些菜单项可能包括`<ul>`和`<li>`标签，其中`<li>`可以包含更多的`<ul>`以表示子菜单。 2. **...
本文将深入探讨“简单好用的JS树型菜单”这一主题，包括其设计原理、实现方法以及如何进行动态添加节点。 首先，我们要理解树型菜单的基本结构。在HTML中，我们可以使用`<ul>`和`<li>`元素来创建一个多级的无序列表...
3. AJAX：异步JavaScript和XML，用于实现页面无刷新的数据交换，适合动态加载树型菜单的子节点。 4. JSON：数据交换格式，常用于服务器向客户端传递数据。 总之，JavaScript动态树型菜单是Web开发中一个实用的交互...
无限级可刷新Js树型菜单是一种常见的前端交互设计，它在网页应用中广泛用于展示具有层级关系的数据，如目录结构、组织架构、导航菜单等。这种菜单的特点是它可以无限制地展开子节点，同时支持动态刷新，即在用户操作...
本文将详细讲解如何使用Java来构建一个动态的、可交互的树型菜单，包括从数据库获取数据、创建树节点、实现添加和删除节点的功能。 首先，我们需要了解Java中的树型组件。在Java Swing库中，`JTree`是用于展示树型...
在这个场景下，"js动态树型结构 树型菜单"指的是使用JavaScript实现的可以动态加载、展示和操作的树状菜单系统。 树型结构是一种数据表示形式，由节点和边组成，每个节点可以有零个或多个子节点。在JavaScript中，...
树型菜单是一种常见的用户界面元素，特别是在计算机软件和网页设计中。它以树状结构来组织数据，模拟了现实世界中的层次关系，使得用户能够直观地理解和导航复杂的系统或信息架构。这种菜单允许用户通过展开和折叠...
"php ajax树型菜单 Tree菜单实例" 提供了一种使用PHP和AJAX技术实现的动态树形菜单解决方案，特别适合于内容管理系统（CMS）中，以便用户能够便捷地浏览和操作多层次的页面或功能。 PHP是一种广泛使用的服务器端...
树,树型空件,树型菜单用法大全(C# .NET),树,树型空件,树型菜单用法大全(C# .NET)树型菜单，树的遍历，树的拖动，树的动态加载，树与菜单的相相互转化，增加树的节点．（treeview,c#,.net,menuStrip)树,树型空件,树型...
2. DOM操作：利用jQuery的选择器功能，动态创建DOM元素，构建出可视化的树型菜单。用户点击节点时，通过事件监听来更新选中状态。 3. 展开与折叠：使用jQuery的show()和hide()方法控制节点的显示和隐藏，实现树的...
本项目利用这两种技术实现了一个动态的树型菜单，它具有选择功能、动态加载和一次性加载所有节点的能力。接下来，我们将深入探讨这些概念和技术。 1. **JavaScript**：JavaScript 是一种广泛使用的客户端脚本语言，...
【基于Ajax的无限树型菜单实现...综上所述，基于Ajax的无限树型菜单通过动态加载数据，提高了网页性能，提供了流畅的用户体验。通过JavaScript和Ajax技术，我们可以实现一个可扩展、响应迅速且易于维护的树型菜单系统。