java+ajax实现web目录树

来源:互联网 发布:淘宝卖衣服图片怎么弄 编辑:程序博客网 时间:2024/06/08 19:10

java+ajax实现web目录树

标签: ajaxjavawebxmlhttprequeststringdiv
5339人阅读 评论(15)收藏举报
本文章已收录于:
分类:
作者同类文章X

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

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

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



    代码和步骤如下:

    1.加载第一层数据(无需用到ajax)。

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

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

    Action代码:

    [java] view plain copy print?
    1. package com.gyhq.view;  
    2.   
    3. import java.io.IOException;  
    4. import java.io.PrintWriter;  
    5. import java.util.ArrayList;  
    6. import java.util.List;  
    7. import java.util.Vector;  
    8.   
    9. import javax.servlet.http.HttpServletResponse;  
    10.   
    11. import org.apache.struts2.ServletActionContext;  
    12.   
    13. import com.gyhq.dao.pojo.GhRegionalismTree;  
    14. import com.gyhq.service.IGhregionalismTreeBiz;  
    15. import com.opensymphony.xwork2.ActionSupport;  
    16.   
    17. @SuppressWarnings("serial")  
    18. public class GhRegionalismAction extends ActionSupport {  
    19.     private IGhregionalismTreeBiz iGhregionalismTreeBiz;//业务逻辑层接口  
    20.     private List<GhRegionalismTree> GhRegionalismList = new Vector<GhRegionalismTree>();//用于存放行政区划数据的集合  
    21.     private GhRegionalismTree ghRegionalismTree = new GhRegionalismTree();//行政区划实体  
    22.       
    23.       
    24.     public GhRegionalismTree getGhRegionalismTree() {  
    25.         return ghRegionalismTree;  
    26.     }  
    27.     public void setGhRegionalismTree(GhRegionalismTree ghRegionalismTree) {  
    28.         this.ghRegionalismTree = ghRegionalismTree;  
    29.     }  
    30.     public List<GhRegionalismTree> getGhRegionalismList() {  
    31.         return GhRegionalismList;  
    32.     }  
    33.     public void setGhRegionalismList(List<GhRegionalismTree> ghRegionalismList) {  
    34.         GhRegionalismList = ghRegionalismList;  
    35.     }  
    36.       
    37.       
    38.     /** 
    39.      * 添加setter器 给是pring配置文件注入 
    40.      *  
    41.      * @author 冯旭 
    42.      * @param iGhregionalismTreeBiz 
    43.      *            IGhregionalismTreeBiz接口 
    44.      */  
    45.     public void setiGhregionalismTreeBiz(  
    46.             IGhregionalismTreeBiz iGhregionalismTreeBiz) {  
    47.         this.iGhregionalismTreeBiz = iGhregionalismTreeBiz;  
    48.     }  
    49.   
    50.     /** 
    51.      * 跳转到目录树页面 
    52.      * @return 
    53.      *//* 
    54.     public String trunToListTreePage(){ 
    55.         return SUCCESS; 
    56.     }*/  
    57.       
    58.       
    59.     /** 
    60.      * 显示行政区划树形结构的第一层 
    61.      *  
    62.      * @author 冯旭 
    63.      * @return String :如果成功就返回SUCCESS 否则返回ERROR 
    64.      */  
    65.     public String displayRegionalismTree() {  
    66.         GhRegionalismList = iGhregionalismTreeBiz.findByFatherRegionalismId("0");  
    67.         return SUCCESS;  
    68.     }  
    69.       
    70.     /**采用ajax返回行政区划树的其他层 
    71.      * @author 冯旭 
    72.      * @return String :返回null 
    73.      * @throws IOException  
    74.      */  
    75.     public String ajaxDisplayRegionalismTree() throws IOException{  
    76.         HttpServletResponse response = ServletActionContext.getResponse();  
    77.         response.setContentType("text/plain");// 设置输出为文字流  
    78.         response.setCharacterEncoding("UTF-8");  
    79.         PrintWriter out = response.getWriter();  
    80.         List<GhRegionalismTree> grl = new ArrayList<GhRegionalismTree>();  
    81.         grl = iGhregionalismTreeBiz.findByFatherRegionalismId(ghRegionalismTree.getSonRegionalismId());  
    82.         for (GhRegionalismTree ggt : grl) {  
    83.             out.print(ggt.getRegionalismName() + "|" + ggt.getSonRegionalismId() + ",");  
    84.             System.out.println(ggt.getRegionalismName() + "|" + ggt.getSonRegionalismId() + ",");  
    85.         }  
    86.         return null;  
    87.     }  
    88. }  

    行政区划DAO(只用到了里面的两方法):

    [java] view plain copy print?
    1. public List<GhRegionalismTree> findByProperty(String propertyName,  
    2.             Object value) {  
    3.         log.debug("finding GhRegionalismTree instance with property: "  
    4.                 + propertyName + ", value: " + value);  
    5.         try {  
    6.             String queryString = "from GhRegionalismTree as model where model."  
    7.                     + propertyName + "= ?";  
    8.             List<GhRegionalismTree> l= getHibernateTemplate().find(queryString, value);  
    9.             return l;  
    10.         } catch (RuntimeException re) {  
    11.             log.error("find by property name failed", re);  
    12.             throw re;  
    13.         }  
    14.     }  
    15.   
    16.     /* (non-Javadoc) 
    17.      * @see com.gyhq.dao.impl.IGhRegionalismTreeDAO#findByFatherRegionalismId(java.lang.String) 
    18.      */  
    19.     @Override  
    20.     public List<GhRegionalismTree> findByFatherRegionalismId(  
    21.             String fatherRegionalismId) {  
    22.         return findByProperty(FATHER_REGIONALISM_ID, fatherRegionalismId);  
    23.     }  

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

    [java] view plain copy print?
    1.        private String sonRegionalismId;// 行政区划编码  
    2. private String regionalismName;// 行政区划名称  
    3. private String fatherRegionalismId;// 行政区划父级编码  


    关键代码html部分:

    [html] view plain copy print?
    1. <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>  
    2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    4. <html>  
    5.     <head>  
    6.         <title>一事一议财政奖补管理系统-行政区划树</title>  
    7.         <script type="text/javascript">  
    8. var xmlHttpRequest;  
    9. var level = 0; //控制树的层次  
    10. function createXmlHttpRequest() {  
    11.     if (window.ActiveXObject) {  
    12.         try {  
    13.             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    14.         } catch (e) {  
    15.             xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");  
    16.         }  
    17.         return xmlHttpRequest;  
    18.     } else if (window.XMLHttpRequest) {  
    19.         return new XMLHttpRequest();  
    20.     }  
    21. }  
    22. function display(id) {  
    23.     eval("var div=div" + id);  
    24.     eval("var img=img" + id);  
    25.     eval("var im=im" + id);  
    26.     div.style.display = div.style.display == "block" ? "none" : "block";  
    27.     img.src = div.style.display == "block" ? "${pageContext.request.contextPath}/images/minus.gif"  
    28.             : "${pageContext.request.contextPath}/images/plus.gif";  
    29.     im.src = div.style.display == "block" ? "${pageContext.request.contextPath}/images/openfold.gif"  
    30.             : "${pageContext.request.contextPath}/images/closedfold.gif";  
    31.     img.alt = div.style.display == "block" ? "关闭" : "展开";  
    32.       
    33.     xmlHttpRequest = createXmlHttpRequest();  
    34.     url = "ajaxDisplayRegionalismTree!ajaxDisplayRegionalismTree.action?ghRegionalismTree.sonRegionalismId=" + id;  
    35.     var dangqiandiv = document.getElementById("div"+id);//动态的当前div  
    36.     if(div.style.display == "block" && dangqiandiv.innerHTML == ""){  
    37.         xmlHttpRequest.open('post', url, true);  
    38.         xmlHttpRequest.onreadystatechange = function() {  
    39.             if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {  
    40.                 var regionalismInfos = xmlHttpRequest.responseText;  
    41.                 var regionalismInfo = regionalismInfos.split(",");  
    42.                 for ( var i = 0; i < (regionalismInfo.length - 1); i++) {  
    43.                     var regionalismInformance = regionalismInfo[i].split("|");  
    44.                     //创建一个div  
    45.                     var createDiv = document.createElement("div");    
    46.                     var fatherLength = regionalismInformance[1].length;  
    47.                     //根据项目树形的结构具体可根据子ID的长度判断树的层次          
    48.                     switch(fatherLength){  
    49.                         case 4:  
    50.                             level = 2;  
    51.                             break;  
    52.                         case 6:  
    53.                             level = 3;    
    54.                             break;  
    55.                         case 9:  
    56.                             level = 4;  
    57.                             break;  
    58.                         case 12:  
    59.                             level = 5;  
    60.                             break;  
    61.                         case 14:  
    62.                             level = 6;  
    63.                             break;  
    64.                     }  
    65.                     for(var j = 0; j < level; j++){  
    66.                         createDiv.innerHTML += "<img src='${pageContext.request.contextPath}/images/white.gif'>";  
    67.                     }  
    68.                     //如果不是最后一级  依然显示文件夹 否则显示最终文件图标  
    69.                     if(regionalismInformance[1].length != 14){  
    70.                         //动态给div添加内容  
    71.                         createDiv.innerHTML += "<img alt='展开' style='cursor: hand;'"   
    72.                         +"onClick='display(\""+regionalismInformance[1]+"\")'id='img"+regionalismInformance[1]+"'src='${pageContext.request.contextPath}/images/plus.gif'>"  
    73.                         +"<img id='im"+regionalismInformance[1]+"' src='${pageContext.request.contextPath}/images/closedfold.gif'>"+  
    74.                         regionalismInformance[1]+regionalismInformance[0]+"<div style='display:none;' id='div"+regionalismInformance[1]+"'> </div>";  
    75.                           
    76.                         //将创建的div附加到父亲div  
    77.                         dangqiandiv.appendChild(createDiv);  
    78.                     }else {  
    79.                         //动态给div添加内容  
    80.                         createDiv.innerHTML += "<img id='im"+regionalismInformance[1]+"' src='${pageContext.request.contextPath}/images/file.gif'>"+  
    81.                         regionalismInformance[1]+regionalismInformance[0]+"<div style='display:none;' id='div"+regionalismInformance[1]+"'> </div>";  
    82.                           
    83.                         //将创建的div附加到父亲div  
    84.                         dangqiandiv.appendChild(createDiv);  
    85.                     }  
    86.                 }  
    87.             }  
    88.         };  
    89.         xmlHttpRequest.setRequestHeader("if-Modified-Since", "0");  
    90.         xmlHttpRequest.send(null);  
    91.     }  
    92. }  
    93. </script>  
    94.         <style type="text/css">  
    95. img {  
    96.     border: 0  
    97. }  
    98. </style>  
    99.     </head>  
    100.   
    101.     <body bgcolor="#E0FFFF">  
    102.         <CENTER>  
    103.             <table>  
    104.                 <tr>  
    105.                     <td valign="top" nowrap="nowrap">  
    106.                         <div>  
    107.                             <c:forEach items="${requestScope.GhRegionalismList}" var="ghRegionalisms">  
    108.                                 <div>  
    109.                                     <img src="${pageContext.request.contextPath}/images/white.gif">  
    110.                                     <img alt="展开" style="cursor: hand;" onClick="display('${ghRegionalisms.sonRegionalismId}');" id="img${ghRegionalisms.sonRegionalismId}" src="${pageContext.request.contextPath}/images/plus.gif">  
    111.                                     <img id="im${ghRegionalisms.sonRegionalismId}" src="${pageContext.request.contextPath}/images/closedfold.gif">  
    112.                                         0${ghRegionalisms.regionalismName}  
    113.                                     <div style="display:none;" id="div${ghRegionalisms.sonRegionalismId}">  
    114.                                           
    115.                                     </div>  
    116.                                 </div>  
    117.                             </c:forEach>  
    118.                         </div>  
    119.                     </td>  
    120.                 </tr>  
    121.             </table>  
    122.         </CENTER>  
    123.     </body>  
    124. </html>  


     

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


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

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

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


    上一篇Oracle学习资料

    我的同类文章

    http://blog.csdn.net
    • Ajax判断用户名是否存在并2011-10-29
    • AJAX缓存问题产生的缘由以及几种解决方法2011-06-17
    • AJAX 联动问题2011-06-19
    • 创建AJAX2011-06-17

    参考知识库

    更多资料请参考:
    猜你在找
    基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统实战教程
    零基础学HTML 5实战开发(第一季)
    Learning AngularJS
    Java之路
    韦东山嵌入式Linux第一期视频
    分析xloadtree 用ajax实现的动态目录树
    xloadtree实现web动态目录树分层加载
    java中关于目录树的简单实现
    java实现文件目录树
    java 实现 文件操作工具集包括文件目录树的拷贝删除移动查找等工具函数
    <iframe width="728" height="90" align="center,center" id="iframeu1607657_0" src="http://pos.baidu.com/qcum?sz=728x90&amp;rdid=1607657&amp;dc=2&amp;di=u1607657&amp;dri=0&amp;dis=0&amp;dai=2&amp;ps=7163x402&amp;coa=at%3D3%26rsi0%3D728%26rsi1%3D90%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&amp;dcb=BAIDU_SSP_define&amp;dtm=BAIDU_DUP_SETJSONADSLOT&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1462945834468&amp;ti=java%2Bajax%E5%AE%9E%E7%8E%B0web%E7%9B%AE%E5%BD%95%E6%A0%91%20-%20JeelonXu.feng%20-%20%E5%8D%9A%E5%AE%A2%E9%A2%91%E9%81%93%20-%20CSDN.NET&amp;ari=1&amp;dbv=0&amp;drs=3&amp;pcs=1581x766&amp;pss=1582x7794&amp;cfv=20&amp;cpl=2&amp;chi=2&amp;cce=true&amp;cec=utf-8&amp;tlm=1462945834&amp;ltu=http%3A%2F%2Fblog.csdn.net%2Fjavaxiaochouyu%2Farticle%2Fdetails%2F7071082&amp;ltr=http%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D2vOiVv28EzH1P8aj7fRJcScxZLj3ENQQXGFuhAJUhxiPeVdexSD4DqTnTUB5K7YJk7uSAl0YhFPZcDgKmTJbq9ibf6OGpY11JIBgAZcHYja%26wd%3D%26eqid%3Decbaf61100051dab000000055732c815&amp;ecd=1&amp;psr=1600x1000&amp;par=1600x909&amp;pis=-1x-1&amp;ccd=24&amp;cja=true&amp;cmi=4&amp;col=zh-CN&amp;cdo=-1&amp;tcn=1462945834&amp;qn=1115e6bc4d58bbc4&amp;tt=1462945834454.20.107.107" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" vspace="0" hspace="0" style="margin: 0px; border: 0px currentColor; border-image: none; vertical-align: bottom;" allowtransparency="true"></iframe>
    查看评论
    13楼 qq_332753952016-03-16 15:14发表 [回复] [引用][举报]
    麻烦大哥把这个项目的代码发给我下可以不啊!急用1991357948@qq.com
    12楼 qq_269900712016-01-28 09:55发表 [回复] [引用][举报]
    985943616@qq.com 求楼主源代码 谢谢了 好人一生平安
    11楼 dandandijuxie2016-01-25 11:14发表 [回复] [引用][举报]
    楼主能发给我一份吗,我的邮箱:qq278576146@163.com
    谢谢啦,跪求呀
    10楼 qq_286364112016-01-08 15:26发表 [回复] [引用][举报]
    楼主,你好,能不把源码发给我呢?1490406701@qq.com,谢谢哈
    9楼 lsy_4yue2015-06-09 17:39发表 [回复] [引用][举报]
    295010646@qq.com
    8楼 lsy_4yue2015-06-09 17:38发表 [回复] [引用][举报]
    求数据库加源码,最近公司让整个树出来,心塞到爆,网上各种混乱
    7楼 zerokkqq2014-12-03 21:10发表 [回复] [引用][举报]
    楼主 完整的源码还在吗?发一份给我参考参考吧
    1047640986@qq.com
    6楼 mycandidate2014-11-30 16:00发表 [回复] [引用][举报]
    我的qq824144753
    5楼 mycandidate2014-11-30 16:00发表 [回复] [引用][举报]
    可不可以给我也发一份代码呢,我最近也正在研究,但是一点头绪都没有
    4楼 yuhuo52120392014-11-14 10:20发表 [回复] [引用][举报]
    楼主,或许这个项目已经很久远了,但是现在我正在学习这个ajax的目录树,如果你还能找到这个项目的话,希望你能发我学习一下,谢谢了,邮箱584950780@qq.com
    3楼 6022679772014-03-13 11:07发表 [回复] [引用][举报]
    楼主你好,项目不错我想学习,你还有没有这个的完整代码呢,有的能不能话发一个给我602267977@qq.com
    2楼 w6666666662012-04-05 18:38发表 [回复] [引用][举报]
    你的代码不全,有没有完整的这样的小例子包含数据库文件的,给我看下呢
    Re: Jeelon2012-04-05 22:42发表 [回复] [引用][举报]
    回复w666666666:发给你了 项目
    有点儿大哦 主要是那个数据库有点大。
    不懂问我
    1楼 w6666666662012-03-27 10:08发表 [回复] [引用][举报]
    楼主,我现在正在写目录树,我希望你能帮助我…你的代码不详细,能不能吧完整的发给我下呢916992127@qq.comm
    Re: Jeelon2012-03-28 09:24发表 [回复] [引用][举报]
    回复w666666666:你好 不好意思 我现在才看到 解决了吗?其实代码也就是这些了 根据情况不同 可能要变化些 你有什么问题?

    0 0
    原创粉丝点击