一.设计思想：
1.布局css+div:好处就不多说了
2.利用ajax，当点击树中某个节点时才生成其子节点，这样能避免了客户端一次性加载整棵树,执行速度快
3.树的生成用java控制而不是像Dtree的实现是用javascript实现，dtree实现的js代码看了你都会头晕，而且这种树是一次性加载，如果你想利用异步请求（ajax）获得一个树，那么实现起来相当麻烦。因为异步请求后执行是在服务器端执行的，js又不能在服务器端执行。但如果数是用java实现就不一样了，呵呵。
4.本程序实现分四层:视图层tree.jsp,treeAction.jsp(可以在通过控制层实现)；业务层com.tree.biz.TreeBiz；数据持久层用hibernate，数据库层用mysql
二。数据设计：
很明显，运用表内关联是不错的选择，有多种实现方式，设计了个parid字段用于标识父级id（也可以通过编号来控制，01，01001，01002的形式，具体根据项目的需求来定）建库脚本如下：
************************************数据脚本 start********************************
create database if not exists `template`;
USE `template`;
DROP TABLE IF EXISTS `tree_demo`;
CREATE TABLE `tree_demo` (
`id` bigint(20) NOT NULL auto_increment,
`item_num` varchar(20) default NULL,
`item_name` varchar(50) default NULL,
`item_parId` bigint(20) default '0',
PRIMARY KEY (`id`)
) TYPE=MyISAM;
insert into `tree_demo` values
(1,'','一级菜单1',0),
(2,'','一级菜单2',0),
(3,'','一级菜单3',0),
(4,'','一级菜单4',0),
(5,'','一级菜单5',0),
(6,'','二级菜单11',1),
(7,'','二级菜单12',1),
(8,'','二级菜单13',1),
(9,'','三级菜单121',7),
(10,'','三级菜单122',7),
(11,'','三级菜单123',7),
(12,'','三级菜单124',7),
(13,'','二级菜单21',2),
(14,'','二级菜单22',2);
*************************************数据脚本 end******************************************
三，持久层实现，我是在myeclipse6.0中实现的，所以pojo类和dao的生成很简单，文件名是com.tree.hibernate.TreeDemo;com.tree.hibernate.TreeDemoDAO;
四，业务逻辑层：com.tree.biz.TreeBiz；代码如下
****************************com.tree.biz.TreeBiz start**************************************
package com.tree.biz;
import java.util.List;
import com.tree.hibernate.TreeDemo;
import com.tree.hibernate.TreeDemoDAO;
public class TreeBiz {
private TreeDemoDAO dao;
public TreeBiz(){
dao = new TreeDemoDAO() ;
}
public TreeDemo getTreeDemoById(Long id){
return dao.findById(id) ;
}
public List getChlids(TreeDemo treeNode){
List li = null ;
li = dao.findByItemParId(treeNode!=null?treeNode.getId():0) ;
return li ;
}
}
*************************************com.tree.biz.TreeBiz end***********************************
五，视图层
1.css的实现代码
***********************************************tree.css start*******************************
TABLE{
border:0px;
margin:0px;
padding:0px;
font-size:12px;
}
DIV{
border:0px;
margin:0px;
padding:0px;
}
.treeClass{
height:16px;
width:200px;
font-size:12px;
}
******************************************tree.css end**********************************
2.ajax.js实现
******************************************ajax.js start**********************************
// JavaScript Document
var divObject ;
function createXMLHttpRequest() {
//alert("1");
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
}
function sendRequest(url,showAreaId){//第1个是提交的url，第2个是定义要将服务器返回的信息显示在哪个id域里
var xmlHttp = createXMLHttpRequest();
url += "&sessionId="+parseInt(Math.random()*(10000000));
//alert(url);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//alert(xmlHttp.responseText);
document.getElementById(showAreaId).innerHTML=xmlHttp.responseText;
}else{
alert('请求的页面异常'+xmlHttp.responseText);
return;
}
}
};
xmlHttp.open("GET",url, false);
xmlHttp.send(null);
}
******************************************ajax.js end***********************************
3.tree.jsp,这个页面用于显示树
******************************************tree.jsp start***********************************
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>纯jsp 动态tree</title>
<link rel="stylesheet" type="text/css" href="../../css/tree.css">
<script type="text/javascript" src="../../js/ajax.js"></script>
<script type="text/javascript">
function treeAcion(nodeId,level){//id:父节点id ; level：节点层次
var node = document.getElementById('child'+nodeId);
var varImg = document.getElementById("varImg"+nodeId);
if(node.style.display == "none"){
sendRequest("treeAction.jsp?id="+nodeId+"&level="+level,"child"+nodeId);//向页面treeAction.jsp异步请求节点的下级节点，并将下级节点显示在id为"child"+nodeId的层里
if(node.innerHTML != ""){ //有下级时才显示
node.style.display = "" ;
varImg.innerHTML="<img src='../images/o.gif'/>" ;//更改节点前的图片
}
}else{
node.style.display = "none" ;
varImg.innerHTML="<img src='../images/c.gif'/>";//更改节点前的图片
}
return false ;
}
</script>
</head>
<body>
<div id="node0" class="treeClass"><a href="#" onclick="return treeAcion('0','0')" >根接点</a></div>
<div id="child0" style="display:none;">
</div>
<!--这里我通过js事件来生成一级根目录，如果想在服务器端生成这个树，则把这段代码换成java实现，具体参照treeAction.jsp-->
<script type="text/javascript">
treeAcion('0','0');
</script>
</body>
</html>
******************************************tree.jsp end***********************************
4.treeAction.jsp 用于生成指定节点的下级节点，可以根据需要用servlet,或struts来做控制层实现
******************************************treeAction.jsp start***********************************
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<jsp:directive.page import="com.tree.biz.TreeBiz"/>
<jsp:directive.page import="com.tree.hibernate.TreeDemo;"/>
<%
try{
TreeBiz treeBiz = new TreeBiz() ;
Long id = Long.valueOf(request.getParameter("id")) ;//父节点id
int level = Integer.parseInt(request.getParameter("level")) ; //父节点层次
int curLevel = level+1 ;//计算当前节点层次
String space = "" ; //菜单前竖虚线数目
for(int i= 1 ; i<curLevel ; i++){//根据级次生成竖虚线数目
space +="<td width='19' nowrap><img src='../images/g.gif'></td> " ;
}
List<TreeDemo> liChild = treeBiz.getChlids(treeBiz.getTreeDemoById(id));//定义要取得的直属下级列表
for(int i=0 ; i<liChild.size() ; i++){
TreeDemo treeNode = liChild.get(i) ;
String imgSrc = "" ;//图标名称
if(treeBiz.getChlids(treeNode).size() == 0){//不存在下级菜单
if(i==liChild.size()-1){ //到了最后一个菜单
imgSrc = "e.gif" ;
}else{
imgSrc = "l.gif" ;
}
}else{ //存在下级菜单
imgSrc = "c.gif" ;
}
%>
<div id="node<%=treeNode.getId()%>" class="treeClass">
<table cellspacing="0" cellpadding="0" align="center" border="0" height="100%" width="100%">
<tr>
<%=space %>
<td width='19' nowrap id="varImg<%=treeNode.getId()%>"><img src="../images/<%=imgSrc%>"/></td>
<td nowrap>
<a href="#" onclick="return treeAcion('<%=treeNode.getId()%>',<%=curLevel %>);"><%=treeNode.getItemName()%></a>
</td>
</tr>
</table>
</div>
<div id="child<%=treeNode.getId()%>" style="display:none;"></div><%
}
}catch(Exception e){
out.println("<font color='red'>出错了：</font>"+e.getMessage());
}
%>
******************************************treeAction.jsp end*********************************
总结：写一个demo因该越简单越好，特别是实现上用视图层加数据库层，这样看着也清爽些，不用在各个层之间转来转去，呵呵。我们还可以在这个树上增加右键功能，这样可以通过右键直接给指定的节点增加下级节点，效果和效率都不错。另外asp的实现思想也一样，两个页面就行。代码量70行左右就能实现了。
分享到：
相关推荐
本项目"基于Ajax的动态树实现"是利用Struts框架和Ajax技术来创建一个交互式的、能实时更新的树形视图。下面将详细介绍这个项目中的关键技术点和实现流程。 首先，Struts是一个Java MVC（Model-View-Controller）...
在本项目中，"AJAX动态树形目录"利用AJAX与XML数据格式，实现了网页上动态显示和交互的树状目录结构。树形目录通常用于文件系统、网站导航或者组织层次结构信息，它通过节点的展开和折叠，使得用户可以方便地浏览和...
项目中采用的AJAX树结构支持无限级子节点，这意味着菜单可以无限制地向下扩展，适应各种层级深度的数据模型。这通常通过递归调用来实现，服务器返回当前节点的子节点信息，然后在客户端递归地渲染这些子节点，直至...
"Ajax实现的动态树菜单"则是利用Ajax（Asynchronous JavaScript and XML）技术来实现实时、无需页面刷新的数据加载和交互。 Ajax的核心在于异步通信，它允许网页部分更新，而不是整个页面刷新。通过在后台与服务器...
通过分析这些文件，我们可以深入理解这个动态树的实现细节，包括数据结构设计、AJAX请求的编写、以及前端如何动态渲染树节点等。 总结来说，"jsp+ajax 动态树"是一个结合了服务器端编程（JSP）和客户端交互（AJAX）...
利用Ajax实现树的动态加载（包含基本实现代码）。
本文聚焦于**基于AJAX的动态树形结构的设计与实现**，探讨如何利用AJAX技术解决传统树形结构中存在的问题，如无法实时更新节点信息、缺乏灵活性等。 #### 二、基础知识概述 1. **AJAX（Asynchronous JavaScript and...
1. 引入Jquery库和相关的CSS、JS文件：确保页面头部包含Jquery库以及实现动态树所需的额外脚本和样式表。 2. HTML结构：创建一个基础的HTML结构，通常是一个无序列表`<ul>`，作为树的基础框架。 3. 数据源：动态树的...
【Ajax+jsp+MySQL实现动态树形菜单】 在Web开发中，动态树形菜单是一种常见的交互元素，它能够以层次结构展示数据，提供用户友好的导航体验。本项目结合了Ajax、jsp和MySQL三种技术来实现这一功能，下面将详细阐述...
总结，这个项目展示了如何整合前端的Ajax技术和后端的JSP处理，结合Oracle数据库，实现动态树形菜单的功能。它涉及到Web开发中的数据交互、服务器端逻辑处理、数据库操作等多个重要环节，对于提升Web应用的交互性和...
下面将详细阐述如何使用JSP和Ajax实现动态树结构以及涉及的相关知识点。 首先，JSP是Java的一种视图技术，它允许开发者在HTML页面中嵌入Java代码，从而实现服务器端的数据处理和动态内容生成。在动态树结构的实现中...
在这个动态树实现中，Struts2可能作为控制器接收前端发送的AJAX请求，解析请求参数，调用业务逻辑，然后返回响应数据，最后由前端使用jQuery和DWR更新视图。 **5. 树结构的实现** 在前端，树结构通常通过...
"src"目录可能包含了JavaScript、CSS和其他前端资源文件，其中JavaScript文件是实现动态加载的核心。"WebRoot"通常代表Web应用的根目录，包含了HTML、CSS和JavaScript等静态文件，以及可能的服务器端脚本。 总结来...
本文将深入探讨如何利用Ajax实现动态加载树形结构，并结合dhtmlx库中的dhtmlxMenu和dhtmlxTree组件，实现支持右键菜单、复选框、拖拽以及排序功能，同时支持json和xml格式的数据加载。 首先，我们要理解Ajax的工作...
4. **动态更新**：将新加载的节点插入到已有的树形目录中，实现动态刷新。 实现这个功能时，可以使用现有的库和框架，如jQuery、React、Vue等，它们提供了更高级别的API，简化了Ajax请求和DOM操作。例如，在React中...
下面将详细探讨动态树的AJAX实现及其相关知识点。 1. **动态树结构**： 动态树是一种可展开和折叠的多级列表，每一级都是一个节点，可以包含子节点。用户可以通过点击节点来展开或关闭其子节点，展示或隐藏相关...
在本示例中，"Ajax技术实现动态获取数据的树状菜单"是一个具体的实践应用，主要目标是创建一个动态加载数据的树状菜单，用户可以在不刷新页面的情况下查看和操作数据。 首先，我们来了解树状菜单的基本概念。树状...