java+ajax实现web目录树
来源:互联网 发布:淘宝卖衣服图片怎么弄 编辑:程序博客网 时间:2024/06/08 19:10
java+ajax实现web目录树
标签: ajaxjavawebxmlhttprequeststringdiv
2011-12-14 17:14 5339人阅读 评论(15)收藏举报
本文章已收录于:
分类:
作者同类文章X
版权声明:本文为博主原创文章,未经博主允许不得转载。
这是我今天做的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>
的确花了我很多的时间 在这里分享给大家,希望大家多多指正,我真的理解刚开始写这个的朋友们,就像昨天我到处问人,在网上找资料,可惜没一个人理我。
网上实现目录树的方法的确有很多,不过都很乱,大概是本人比较愚笨吧 ,呵呵。
还望朋友们分享更好的方法。在此谢过了!
上一篇Oracle学习资料
- 下一篇JavaScript实现Java的List功能
我的同类文章
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&rdid=1607657&dc=2&di=u1607657&dri=0&dis=0&dai=2&ps=7163x402&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&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1462945834468&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&ari=1&dbv=0&drs=3&pcs=1581x766&pss=1582x7794&cfv=20&cpl=2&chi=2&cce=true&cec=utf-8&tlm=1462945834&ltu=http%3A%2F%2Fblog.csdn.net%2Fjavaxiaochouyu%2Farticle%2Fdetails%2F7071082&ltr=http%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D2vOiVv28EzH1P8aj7fRJcScxZLj3ENQQXGFuhAJUhxiPeVdexSD4DqTnTUB5K7YJk7uSAl0YhFPZcDgKmTJbq9ibf6OGpY11JIBgAZcHYja%26wd%3D%26eqid%3Decbaf61100051dab000000055732c815&ecd=1&psr=1600x1000&par=1600x909&pis=-1x-1&ccd=24&cja=true&cmi=4&col=zh-CN&cdo=-1&tcn=1462945834&qn=1115e6bc4d58bbc4&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>
0 0
- java+ajax实现web目录树
- java+ajax实现web目录树
- java web目录树
- java web目录树
- 【JAVA WEB】WEB-INF目录
- java实现文件目录树
- java web 目录结构
- java web目录层次
- Java Web开发-目录
- ajax 请求 JAVA WEB应用程序实现跨域请求
- Java web AJAX入门
- 【java web】--Ajax拾遗
- Java web ajax分页
- Java web AJAX
- 利用Ajax实现无限级目录树(.NET)
- 分析xloadtree, 用ajax实现的动态目录树
- 用AJAX实现目录树,菜鸟也能学会(asp)
- web实现进入指定目录
- 锐捷Linux客户端使用方法(基于ubuntu16.04)
- jquery的on()方法控制还未创建的节点
- windoes10下 如何将mongoDB配置为服务
- 单链表,你好
- 任正非谈成功秘诀:28年只对准一个城墙口冲锋
- java+ajax实现web目录树
- IOS 解决后台计数器不准确问题
- OC数据类型总结及类关系图整理
- Android Studio值得推荐的主题背景
- JDK1.5,Switch中使用Enum
- JAVA 笔记(一)
- 时间戳转成字符串时间或者日期
- 用AndroidStudio导入github项目
- PAT乙级1012-D进制的A+B (20)
谢谢啦,跪求呀
1047640986@qq.com
有点儿大哦 主要是那个数据库有点大。
不懂问我