这是我今天做的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);
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");
var fatherLength = regionalismInformance[1].length;
//根据项目树形的结构具体可根据子ID的长度判断树的层次
switch(fatherLength){
case 4:
level = 2;
break;
case 6:
level = 3;
break;
case 9:
level = 4;
break;
case 12:
level = 5;
break;
case 14:
level = 6;
break;
}
for(var j = 0; j < level; j++){
createDiv.innerHTML += "<img src='${pageContext.request.contextPath}/images/white.gif'>";
}
//如果不是最后一级 依然显示文件夹 否则显示最终文件图标
if(regionalismInformance[1].length != 14){
//动态给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[1]+regionalismInformance[0]+"<div style='display:none;' id='div"+regionalismInformance[1]+"'> </div>";
//将创建的div附加到父亲div
dangqiandiv.appendChild(createDiv);
}else {
//动态给div添加内容
createDiv.innerHTML += "<img id='im"+regionalismInformance[1]+"' src='${pageContext.request.contextPath}/images/file.gif'>"+
regionalismInformance[1]+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">
0${ghRegionalisms.regionalismName}
<div style="display:none;" id="div${ghRegionalisms.sonRegionalismId}">
</div>
</div>
</c:forEach>
</div>
</td>
</tr>
</table>
</CENTER>
</body>
</html>
的确花了我很多的时间 在这里分享给大家，希望大家多多指正，我真的理解刚开始写这个的朋友们，就像昨天我到处问人，在网上找资料，可惜没一个人理我。
网上实现目录树的方法的确有很多，不过都很乱，大概是本人比较愚笨吧 ，呵呵。
还望朋友们分享更好的方法。在此谢过了！
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
