java+ajax实现web目录树

这是我今天做的java+ajax实现的目录树做了一天终于弄出来了死了好多脑细胞，不容易啊，开始在网上找了好多资料，本人愚拙没用一个弄清楚了，无奈之下，只有自己动手丰衣足食。

开始的时候我没用考虑到性能，所以用到了java递归的方式，架上项目数据库后测试才发现，速度慢的惊人（共几万条数据）。需要点击父目录后才查询显示父目录下面的子目录。所以不得不改变方针。

我用到js 递归生成div 下面是我实现的一个大概效果图的一部分。没用用到css有点丑哈呵呵。用jquery也可以实现。不过我还是用js把他敲完了（本人对jquery不熟悉，看来还得学习啊要不真跟不上了，用jquery做起来就要简单多了）

代码和步骤如下：

1.加载第一层数据（无需用到ajax）。

2.根据第一层触发onclick事件去请求ajax显示以下各层。

声明以下我使用的是SSH2 所以下面的代码或许不全，因为省略的大家都清楚。

Action代码：

package com.gyhq.view;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Vector;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.gyhq.dao.pojo.GhRegionalismTree;
import com.gyhq.service.IGhregionalismTreeBiz;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class GhRegionalismAction extends ActionSupport {
	private IGhregionalismTreeBiz iGhregionalismTreeBiz;//业务逻辑层接口
	private List<GhRegionalismTree> GhRegionalismList = new Vector<GhRegionalismTree>();//用于存放行政区划数据的集合
	private GhRegionalismTree ghRegionalismTree = new GhRegionalismTree();//行政区划实体
	
	
	public GhRegionalismTree getGhRegionalismTree() {
		return ghRegionalismTree;
	}
	public void setGhRegionalismTree(GhRegionalismTree ghRegionalismTree) {
		this.ghRegionalismTree = ghRegionalismTree;
	}
	public List<GhRegionalismTree> getGhRegionalismList() {
		return GhRegionalismList;
	}
	public void setGhRegionalismList(List<GhRegionalismTree> ghRegionalismList) {
		GhRegionalismList = ghRegionalismList;
	}
	
	
	/**
	 * 添加setter器 给是pring配置文件注入
	 * 
	 * @author 冯旭
	 * @param iGhregionalismTreeBiz
	 *            IGhregionalismTreeBiz接口
	 */
	public void setiGhregionalismTreeBiz(
			IGhregionalismTreeBiz iGhregionalismTreeBiz) {
		this.iGhregionalismTreeBiz = iGhregionalismTreeBiz;
	}

	/**
	 * 跳转到目录树页面
	 * @return
	 *//*
	public String trunToListTreePage(){
		return SUCCESS;
	}*/
	
	
	/**
	 * 显示行政区划树形结构的第一层
	 * 
	 * @author 冯旭
	 * @return String :如果成功就返回SUCCESS 否则返回ERROR
	 */
	public String displayRegionalismTree() {
		GhRegionalismList = iGhregionalismTreeBiz.findByFatherRegionalismId("0");
		return SUCCESS;
	}
	
	/**采用ajax返回行政区划树的其他层
	 * @author 冯旭
	 * @return String :返回null
	 * @throws IOException 
	 */
	public String ajaxDisplayRegionalismTree() throws IOException{
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/plain");// 设置输出为文字流
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		List<GhRegionalismTree> grl = new ArrayList<GhRegionalismTree>();
		grl = iGhregionalismTreeBiz.findByFatherRegionalismId(ghRegionalismTree.getSonRegionalismId());
		for (GhRegionalismTree ggt : grl) {
			out.print(ggt.getRegionalismName() + "|" + ggt.getSonRegionalismId() + ",");
			System.out.println(ggt.getRegionalismName() + "|" + ggt.getSonRegionalismId() + ",");
		}
		return null;
	}
}

行政区划DAO（只用到了里面的两方法）：

public List<GhRegionalismTree> findByProperty(String propertyName,
			Object value) {
		log.debug("finding GhRegionalismTree instance with property: "
				+ propertyName + ", value: " + value);
		try {
			String queryString = "from GhRegionalismTree as model where model."
					+ propertyName + "= ?";
			List<GhRegionalismTree> l= getHibernateTemplate().find(queryString, value);
			return l;
		} catch (RuntimeException re) {
			log.error("find by property name failed", re);
			throw re;
		}
	}

	/* (non-Javadoc)
	 * @see com.gyhq.dao.impl.IGhRegionalismTreeDAO#findByFatherRegionalismId(java.lang.String)
	 */
	@Override
	public List<GhRegionalismTree> findByFatherRegionalismId(
			String fatherRegionalismId) {
		return findByProperty(FATHER_REGIONALISM_ID, fatherRegionalismId);
	}

行政区划实体类就不给出了值给出他的字段，因为都是些get set的。

        private String sonRegionalismId;// 行政区划编码
	private String regionalismName;// 行政区划名称
	private String fatherRegionalismId;// 行政区划父级编码

关键代码html部分：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>一事一议财政奖补管理系统-行政区划树</title>
		<script type="text/javascript">
var xmlHttpRequest;
var level = 0; //控制树的层次
function createXmlHttpRequest() {
	if (window.ActiveXObject) {
		try {
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		return xmlHttpRequest;
	} else if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
}
function display(id) {
	eval("var div=div" + id);
	eval("var img=img" + id);
	eval("var im=im" + id);
	div.style.display = div.style.display == "block" ? "none" : "block";
	img.src = div.style.display == "block" ? "${pageContext.request.contextPath}/images/minus.gif"
			: "${pageContext.request.contextPath}/images/plus.gif";
	im.src = div.style.display == "block" ? "${pageContext.request.contextPath}/images/openfold.gif"
			: "${pageContext.request.contextPath}/images/closedfold.gif";
	img.alt = div.style.display == "block" ? "关闭" : "展开";
	
	xmlHttpRequest = createXmlHttpRequest();
	url = "ajaxDisplayRegionalismTree!ajaxDisplayRegionalismTree.action?ghRegionalismTree.sonRegionalismId=" + id;
	var dangqiandiv = document.getElementById("div"+id);//动态的当前div
	if(div.style.display == "block" && dangqiandiv.innerHTML == ""){
		xmlHttpRequest.open('post', url, true);
		level ++;
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				var regionalismInfos = xmlHttpRequest.responseText;
				var regionalismInfo = regionalismInfos.split(",");
				for ( var i = 0; i < (regionalismInfo.length - 1); i++) {
					var regionalismInformance = regionalismInfo[i].split("|");
					//创建一个div
					var createDiv = document.createElement("div");
					for(var j = 0; j < level; j++){
						if(j == 0){
							createDiv.innerHTML += "<img src='${pageContext.request.contextPath}/images/white.gif'>";
						}
						createDiv.innerHTML += "<img src='${pageContext.request.contextPath}/images/white.gif'>";
					}
					//动态给div添加内容
					createDiv.innerHTML += "<img alt='展开' style='cursor: hand;'" 
					+"onClick='display(\""+regionalismInformance[1]+"\")'; id='img"+regionalismInformance[1]+"'src='${pageContext.request.contextPath}/images/plus.gif'>"
					+"<img id='im"+regionalismInformance[1]+"' src='${pageContext.request.contextPath}/images/closedfold.gif'>"+
					regionalismInformance[0]+"<div style='display:none;' id='div"+regionalismInformance[1]+"'> </div>";
					
					//将创建的div附加到父亲div
					dangqiandiv.appendChild(createDiv);
				}
			}
		};
		xmlHttpRequest.setRequestHeader("if-Modified-Since", "0");
		xmlHttpRequest.send(null);
	}
}
</script>
		<style type="text/css">
img {
	border: 0
}
</style>
	</head>

	<body bgcolor="#E0FFFF">
		<CENTER>
			<table>
				<tr>
					<td valign="top" nowrap="nowrap">
						<div>
							<c:forEach items="${requestScope.GhRegionalismList}" var="ghRegionalisms">
								<div>
									<img src="${pageContext.request.contextPath}/images/white.gif">
									<img alt="展开" style="cursor: hand;" onClick="display('${ghRegionalisms.sonRegionalismId}');" id="img${ghRegionalisms.sonRegionalismId}" src="${pageContext.request.contextPath}/images/plus.gif">
									<img id="im${ghRegionalisms.sonRegionalismId}" src="${pageContext.request.contextPath}/images/closedfold.gif">
										${ghRegionalisms.regionalismName}
									<div style="display:none;" id="div${ghRegionalisms.sonRegionalismId}">
										
									</div>
								</div>
							</c:forEach>
						</div>
					</td>
				</tr>
			</table>
		</CENTER>
	</body>
</html>