java+ajax实现web目录树

来源：互联网发布：sql 字符串长度编辑：程序博客网时间：2024/05/18 03:49

这是我今天做的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) */@Overridepublic 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);//动态的当前divif(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("|");//创建一个divvar 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附加到父亲divdangqiandiv.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附加到父亲divdangqiandiv.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>

配置文件些我就不写出来了每个配置文件也就几句话，大家都很清楚。

的确花了我很多的时间在这里分享给大家，希望大家多多指正，我真的理解刚开始写这个的朋友们，就像昨天我到处问人，在网上找资料，可惜没一个人理我。

网上实现目录树的方法的确有很多，不过都很乱，大概是本人比较愚笨吧，呵呵。

还望朋友们分享更好的方法。在此谢过了！