ajax + div +js +xml+ servlet 实现无限级动态目录树（原创）

虽然网上这方面的资料很多，但真正能用的几乎没有，而笔者最近在做开发的时候，实在找不到合适的。没办法，只好自己动手，丰衣足食了。。

这棵目录树,不仅实现了无限级动态目录.而且页面上可以通过右键菜单实现树节点的动态添加,删除和重命名.另外还支持节点之间的拖放操作.因为基于ajax技术,所以所有操作都是无刷新的.

缺点:因为时间紧迫,所以开发的时候,代码质量估计不是很高,另外,xml文件是一次性从数据库读取生成的,而不是随着节点的展开而读取数据,所以对于大数据量的访问是不适合的.

（真后悔啊， 花了n多时间，挂掉了n多脑细胞！！）。希望对大家有所帮助！！！

1。数据表结构

 

nodeid //节点id

nodename//节点名称

parentid//父节点id

childid //子节点id

 上面的字段类型都是varchar.根据项目了，设定为了11位

2.xml文件格式

noderoot id="" text="" parentid=""

node id="" text="" parentid=""

 xml 文件是从数据库里读取并由servlet动态生成的。除了根节点的 parentid 属性为空外，其他都是有数值的。

因为js是utf-8编码的，所以在servlet里面最好加上下面2句

response.setHeader("Cache-Control", "no-cache");
  response.setContentType("text/xml;charset=utf-8");

3.ajax.js

js 代码

var req = new function()
{
    this.xhr = null;
    this.xmldata = null;
    this.userid = null;

  this.createInstance = function()
  {
    var instance = null;
    try
    {
        instance = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
         instance = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E)
        {
         instance = false;
        }
    }

    if(!instance && typeof XMLHTTPRequest != 'undefined')
    {
        instance = new XMLHTTPRequest();
        if (instance.overrideMimeType)
        {
            instance.overrideMimeType="text/xml";
        }
    }
    return instance;
  }

    this.getxmldata= function()
    {
        this.userid = arguments[0];
        xhr = this.createInstance();
        xhr.onreadystatechange=this.buildxmltree;
        xhr.open("GET","/getdatafromXML?userid="+arguments[0],true);
        xhr.send(null);
    }

    this.buildxmltree = function()
    {
        if(xhr.readyState==4)
        {
            if(xhr.status==200)
            {
                req.xmldata = xhr.responseText;
                var o = new ActiveXObject('Microsoft.XMLDOM');
                o.async = false;
                o.loadXML(req.xmldata);
                req.doXMLMsg(o);
            }
            else
            {
                //deal the error here
            }
        }
    }

    this.doXMLMsg = function(obj)
    {
        treeview.data = obj;
        treeview.xhr = req.xhr;
        treeview.userid = req.userid;
        treeview.init();
    }

}

 

4.treeview.js

var treeview = new function() {
 this.data = null;
 this.xhr = null;
 this.userid = null;
 this.icon=new Array();
 this.icon["leaf"]='/Doc/images/child.gif';
this.icon["open"]='/Doc/images/opened.gif';
 this.icon["close"]='/Doc/images/closed.gif';
 this.user = null;
 this.rootid = null;
 this.root = null;
 this.dragElement = null;
 this.currElement = null;
 this.dragid = null;
 this.targetid = null;
 this.rightmenu = null;
 this.dragPath = null;
 this.jink = "no";
 
 this.init = function() {
  this.user = this.data.getElementsByTagName("noderoot")[0].getAttribute("text");
  this.rootid = this.data.getElementsByTagName("noderoot")[0].getAttribute("id");
 this.root = document.createElement("div");
  this.root.roll = 0;
  this.root.style.position="relative";
 this.root.style.display="block";
 this.root.innerHTML="";
  this.root.innerHTML+='';
  this.root.innerHTML+=''+this.user+'';
  this.root.ondragstart=treeview.dragstart;
  this.root.ondragover=treeview.dragover;
  this.root.ondrop=treeview.drop;
  this.root.ondragend=treeview.dragend;
  this.root.onmousedown=treeview.selectText;
  document.body.appendChild(this.root);

 this.rightmenu = document.createElement("div");
  this.rightmenu.id = "menu";
  this.rightmenu.style.position="absolute";
  this.rightmenu.style.width="30px";
 this.rightmenu.style.height="60px";
  this.rightmenu.style.display="none";
  document.body.appendChild(this.rightmenu);
  
     var obj = this.data.documentElement;
    if(obj.hasChildNodes()) {
  var i;
  var nodes = obj.childNodes;
   for(i=0;i #    var el = document.createElement("div");
    el.innerHTML="";
   var subObj = nodes.item(i);
    var subid = subObj.getAttribute("id");
    el.roll = 0;
   el.style.position="relative";
    el.style.marginLeft="14px";
   el.style.display="none";
   if(subObj.hasChildNodes()) {
    el.innerHTML+='';
   el.innerHTML+=''+subObj.getAttribute("text")+'';
       this.root.appendChild(el);
     this.showChilds(subObj,el);
    }else {
    el.innerHTML+='';
     el.innerHTML+=''+subObj.getAttribute("text")+'';
     this.root.appendChild(el);
    }
  }
  }          
 }

 this.showChilds=function(o,ev)
 {
  var i;
  var nodes = o.childNodes;
  for(i=0;i #  { 
   var el = document.createElement("div");
   el.innerHTML="";
   var subObj = nodes.item(i);
   var subid = subObj.getAttribute("id");
   el.roll = 0;
   el.style.position="relative";
   el.style.marginLeft="14px";
   el.style.display="none";
   if(subObj.hasChildNodes()) 
   {
    el.innerHTML+='';
    el.innerHTML+=''+subObj.getAttribute("text")+'';
       ev.appendChild(el);
                this.showChilds(subObj,el);
  }else 
   {
    el.innerHTML+='';
   el.innerHTML+=''+subObj.getAttribute("text")+'';
    ev.appendChild(el);
  }
  }
}

 this.addElement= function(id) {
  var obj = document.getElementById(id);
  var upObj = obj.parentNode;
  var o = arguments[1];
  if(o) {
   var subObj=o.childNodes.item(1);         
        subObj.setAttribute("parentid",id);
   upObj.appendChild(o);   
   if(upObj.getAttribute("roll")==0) 
   {
    upObj.childNodes.item(0).setAttribute("src",treeview.icon["open"]);
  } 
         var subid = subObj.getAttribute("id");
      xhr.open("GET","/addElement?parentid="+id+"&nodeid="+subObj.getAttribute("id")+"&nodename="+subObj.getAttribute("name")+"&path="+treeview.getfullpath(subObj.getAttribute("id"),""));
     xhr.send(null);
      return;
  } 
 }
 
 this.deleteElement=function(valueid) {
  menu.style.display="none";
 var delPath = treeview.getfullpath(valueid,"");
  var obj = document.getElementById(valueid);
  var parentid = obj.getAttribute("parentid");
  var upObj = document.getElementById(parentid);
  var oEle = obj.parentNode.getElementsByTagName("div");
 if(oEle.length!=0)
  {
   var i;
   for(i=0;i #   {
    var subObj = oEle.item(i);
   if(subObj.parentNode==obj.parentNode)
   {
     this.deleteChilds(subObj);
     obj.parentNode.removeChild(subObj);
   }
   } 
 }
  upObj.parentNode.removeChild(obj.parentNode);
  oEle = upObj.parentNode.getElementsByTagName("DIV");
  var bool = upObj.parentNode.childNodes.item(1).getAttribute("parentid");
  if(oEle.length==0)
  {
   if((bool!="")&&(bool!=null)) {
    upObj.parentNode.childNodes.item(0).setAttribute("src",treeview.icon["leaf"]);
       upObj.parentNode.setAttribute("roll",0);
  }
  }
 xhr.open("GET","/delElement?id="+valueid+"&parentid="+parentid+"&subPath="+delPath);
  xhr.send(null); 
  
 }
 
 this.deleteChilds=function(o) {
  var oEle = o.getElementsByTagName("DIV");
  if(oEle.length!=0)
  {
   var i;
   for(i=0;i #   {
    var subObj = oEle.item(i);
    if(subObj.parentNode==o)
    {
    this.deleteChilds(subObj);
     o.removeChild(subObj);
   }
   }
  } 
 }
 
 this.rename=function(nameid) {
  menu.style.display="none";
  var path = treeview.getfullpath(nameid,"");
  var obj = document.getElementById(nameid);
 var result = prompt("please input a new name","");
  if(result!=null) {
   obj.setAttribute("name",result);
   obj.innerText=result;
  }
  xhr.open("GET","/rename?name="+result+"&nameid="+nameid+"&path="+path+"&upPath="+treeview.getfullpath(obj.getAttribute("parentid"),""));
  xhr.send(null);
 }
 
 this.selectText=function() 
 {
  var o = window.event.srcElement;
  if(o.tagName!="SPAN") {
   return;
  }
 var ra = document.body.createTextRange();   
        ra.moveToElementText(o); 
        ra.select();     
        window.event.cancelBubble = true;
 }
 
 this.dragstart=function() 
 {
  var o = window.event.srcElement;
 if(o.tagName != "SPAN") 
  {
   return false;
  }
 this.dragid = o.getAttribute("id");
  this.dragPath = treeview.getfullpath(this.dragid,"");
 this.dragElement = o.parentNode;
  var length = treeview.childNodeNum(this.dragElement.parentNode);
  if(length==1)
  {
   this.dragElement.parentNode.childNodes.item(0).setAttribute("src",treeview.icon["leaf"]);
  }
 }
 
 this.dragover=function() {
  if(!this.dragElement.contains(window.event.srcElement)) {
   if(window.event.srcElement.tagName=="DIV")
  {
    this.currElement = window.event.srcElement;
   }
   else
   {
    this.currElement = window.event.srcElement.parentNode;
  }
            window.event.returnValue = false;
  }
 }
 
 this.drop=function() {
  this.targetid = this.currElement.childNodes.item(1).getAttribute("id");
  this.currElement.appendChild(this.dragElement);
  this.dragElement.childNodes.item(1).setAttribute("parentid",this.currElement.childNodes.item(1).getAttribute("id"));
 }
 
 this.dragend=function() {
  var length = treeview.childNodeNum(this.currElement);
  if(length!=0)
  {
   this.currElement.childNodes.item(0).setAttribute("src",treeview.icon["open"]);
   this.currElement.setAttribute("roll",0);
  }
  xhr.open("GET","/dragElement?dragid="+this.dragid+"&targetid="+this.targetid+"&dragPath="+this.dragPath+"&targetPath="+treeview.getfullpath(this.dragid,""));
  xhr.send(null);
 }
 
 this.showDiv=function() {
  var o = window.event.srcElement;
  if(o.tagName!="SPAN") {
   if(o.tagName=="IMG") {
    o = o.parentNode.item(1);
   }else {
    o = o.item(1);
   }
  }
  var id = o.getAttribute("id");
  treeview.rightmenu.style.left=event.clientX;
  treeview.rightmenu.style.top=event.clientY; 
  
  var parent = o.getAttribute("parentid");

//这里的那段代码总是显示不出来，看源代码吧！

 this.getfullpath=function(nodeid,path) {//get the full path of the node
  var path = path;
  var node = document.getElementById(nodeid);
  path = "/"+node.getAttribute("name")+path;  
  var parentid = node.getAttribute("parentid");
  if(parentid!=null&&parentid!="") {
   path = this.getfullpath(parentid,path);
  }
  return path;
 }
 
 this.jinkpage=function() {
  var jink = arguments[0];
  var o = window.event.srcElement;
  if(o.tagName=="div") {
   o = o.childNodes.item(1);
  }else if(o.tagName=="img") {
   o = o.parentNode.childNodes.item(1);
  }
  var id = o.getAttribute("id");
  var pathway = treeview.getfullpath(id,"");
  if(jink=="no") {
   pathway = "abcdef";
  }
  parent.frames["right"].location.href="/Doc/jsp/showAllFileMsg.jsp?path="+pathway;
 }
 
 this.buildObj=function() {
  menu.style.display="none";
  var o = new Object();
  var id = this.userid.toString()+this.getRandomNumber();
  var result = prompt("please input a new name","");
  if(!result) {
   alert("the name can`t be null!!");
   result = prompt("please input a new name","");
  } 
  

js 代码

o = document.createElement("div");
        o.roll = 0;
        o.style.position="relative";
        o.style.marginLeft="10px";
        o.style.padding = "2px";
        o.style.display="block";
        o.innerHTML='"treeview.divCtrl()" />';
        o.innerHTML+='"cursor:hand;height:20px" id='+id+' name='+result+' parentid=""'+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+result+'';
        return o;

 
 this.getRandomNumber=function() {
  var num = Math.round(10000*Math.random());
  return num;
 }
 
 this.divCtrl=function()
 {
  var o = window.event.srcElement;
  var img = o.getAttribute("src");
  img = img.substring(img.lastIndexOf("/")+1);
  if(img=="child.gif")
  {
   return;
  }
  var obj = o.parentNode;
  if(obj.getAttribute("roll")==0)
  {
   var oEle = obj.getElementsByTagName("div");
   if(oEle.length!=0)
   {
    var i;
    for(i=0;i     {
     var subObj = oEle.item(i);
     if(subObj.parentNode==obj)
     {
      subObj.style.display="block";
     }
    }
   }
   o.setAttribute("src",treeview.icon["open"]);
   obj.setAttribute("roll",1);
  }  
  else if(obj.getAttribute("roll")==1)
  {
   var oEle = obj.getElementsByTagName("div");
   if(oEle.length!=0)
   {
    var i;
    for(i=0;i     {
     var subObj = oEle.item(i);
     if(subObj.parentNode==obj)
     { 
      if(subObj.getAttribute("roll")==1)
      {
       this.hideDiv(subObj);
      }
      subObj.style.display="none"; 
     } 
    }
   }
   o.setAttribute("src",treeview.icon["close"]);
   obj.setAttribute("roll",0);
  }  
 }
 
 this.hideDiv=function(o)
 {
  var oEle = o.getElementsByTagName("div");
  if(oEle.length!=0)
  {
   var i;
   for(i=0;i    {
    var subObj = oEle.item(i);
    if(subObj.parentNode==o)
    { 
     if(subObj.getAttribute("roll")==1)
     {
      this.hideDiv(subObj);
     }
     subObj.style.display="none"; 
    } 
   }
  }
  o.childNodes.item(0).setAttribute("src",treeview.icon["close"]);
  o.setAttribute("roll",0);
 }
 
 this.hidemenu=function()
 {
  menu.style.display="none";
 }
 
 this.childNodeNum=function(o)
 {
  var oEle = o.getElementsByTagName("DIV");
  return oEle.length;
 }
 
}

5。showTree.jsp

java 代码

<!---->



    "Content-Type" content="text/html; charset=utf-8">
    "stylesheet" type="text/css" href="/Doc/css/panel.css">
    <script type=< span="">"text/javascript" src="/Doc/js/treeview.js" charset="utf-8"></script>
    <script type=< span="">"text/javascript" src="/Doc/js/ajax.js" charset="utf-8"></script>

  <!---->
  "treeview.hidemenu()" class="blue">
 <script language=< span="">"javascript">
    var renamefolder = "重命名文件夹";
    var makefolder = "新建文件夹";
    var delfolder = "删除文件夹";
    req.getxmldata(<%= userid %>);

 </script>

 

//晕啊，这什么编辑器啊，上传个文件都有bug！！！删除多余的删了n年也没反应！！！

• treeview.rar (4.6 KB)
• 下载次数: 460

• treeview.rar (4.6 KB)
• 下载次数: 163

• treeview.rar (4.6 KB)
• 下载次数: 135

分享到：

刚在网上做了个测试，感觉选错了职业了！！ ... | 关于jspsmartupload 上传带空格的文件 解 ...

• 2007-05-11 16:20
• 浏览 6082
• 评论(4)
• 查看更多

评论

4 楼 lovang 2010-05-11  

推荐 dhtmlxtree。开源版功能就很不错，一直用。drop、edit、checkbox等都有,异步加载。而且代码写的也挺简单的，有其他需求可以自己添加扩展。

3 楼 streamfly 2010-05-11  

当时技术不好，写的质量不高，至多可以作为树实现的一种参考，思路应该还算清晰。往后不做回复了，呵呵！现在有很多成品！

2 楼 jnisonhe 2010-05-10  

呵呵，最近在做书的作业，头都想大了..

1 楼 rennuoting 2007-10-21  

大哥 你这棵树能共享一下吗

相关推荐

Ajax+Servlet+Java+JavaScript实现分页

在本教程中，我们将探讨如何利用Ajax、Servlet、Java和JavaScript来实现这一功能。 首先，让我们从Java后端开始。Servlet是Java Web应用程序中的一个关键组件，用于处理HTTP请求和响应。在分页场景中，Servlet主要...

servlet+ajax实现搜索框智能提示

在现代Web应用中，"servlet+ajax实现搜索框智能提示"是一个常见的功能，它能够极大地提升用户体验。这个功能使得用户在输入搜索关键词时，无需完整输入就能得到相关的搜索建议，这种实时反馈的方式大大减少了用户的...

jquery+servlet展示XML树形结构

"jQuery + Servlet + Ajax 展示XML树形结构"是一个典型的Web应用程序开发场景，它涉及到前端的交互、后端的数据处理以及异步通信技术。下面将详细解析这个主题中的关键知识点。 首先，**jQuery** 是一个流行的...

JSP+Ajax div自动刷新 程序代码

根据提供的文件信息，我们可以梳理出以下几个关键的知识点： ### 一、JSP+Ajax 技术结合...以上就是关于 JSP+Ajax 实现 div 自动刷新的主要知识点和技术细节。对于初学者来说，理解这些概念和技术是非常重要的基础。

Echarts通过Ajax实现动态数据加载

### Echarts通过Ajax实现动态数据加载 #### 一、引言 在现代Web开发中，数据可视化是一项重要的技能。Echarts作为一款强大的JavaScript图表库，因其丰富的图表类型、灵活的配置选项以及良好的交互性而备受开发者...

利用AJAX+J2EE开发组织机构管理系统

AJAX（Asynchronous JavaScript and XML）是一项新兴技术，自2005年左右出现以来便迅速成为Web开发领域的重要组成部分。它允许浏览器通过异步方式与服务器通信，从而在不重新加载整个页面的情况下更新部分网页内容，...

巧用AJAX+J2EE开发组织机构管理系统

AJAX（异步JavaScript和XML）技术的引入极大地改变了Web应用程序的交互方式。通过AJAX，客户端可以在无需刷新整个页面的情况下，仅更新必要的内容，从而提高用户体验。这主要得益于AJAX的异步特性，它使得用户在等待...

ajax+dwr的一个简单例子

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升了用户体验，使得用户在等待响应时不必...

AJAX JSP DIV 聊天室练习实例

1. **AJAX (Asynchronous JavaScript and XML)**: AJAX 是一种在不重新加载整个网页的情况下，更新部分网页内容的技术。在聊天室中，AJAX 主要负责后台数据的异步传输，使得用户可以发送消息并立即看到其他人的回复...

Ajax与servlet免刷新验证

在IT行业中，Ajax（Asynchronous JavaScript and XML）与Servlet的结合使用是构建高效、交互性强的Web应用程序的关键技术。这个实例“Ajax与servlet免刷新验证”主要展示了如何利用Ajax实现用户输入数据的实时验证，...

tomcat-servlet-ajax最基础例子

在这个基础实例中，我们将探讨如何在Tomcat服务器上使用Servlet和Ajax技术实现一个简单的交互功能。Tomcat是一个流行的开源Java Servlet容器，它允许开发者运行和部署基于Java的Web应用程序。而Ajax（Asynchronous ...

• ajax js 实现类似google查询效果 (原创)

  2007-07-06 16:51 4325
   用ajax,js实现的类似google的查询效果,并支持回调 ...