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
• 浏览 6046
• 评论(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  

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

相关推荐

JavaScript完全自学宝典 源代码

addressbook.war JavaScript+XML实现通讯录的工程文件（可以直接在Tomcat下发布运行）。 addressbook.xml 记录通讯录的XML文件。 第14章（\c14） 示例描述：介绍JavaScript与Microsoft Office互操作的方法。 ...

千方百计笔试题大全

184、Servlet执行时一般实现哪几个方法？ 44 185、getServletContext()和getServletConfig()的意思 44 186、Hashtable和HashMap 44 187、JAVA SERVLET API中forward() 与redirect()的区别？ 44 189、Can a Java ...

java面试宝典

184、Servlet执行时一般实现哪几个方法？ 44 185、getServletContext()和getServletConfig()的意思 44 186、Hashtable和HashMap 44 187、JAVA SERVLET API中forward() 与redirect()的区别？ 44 189、Can a Java ...

Java面试宝典2020修订版V1.0.1.doc

目录 一、 HTML&CSS部分 11 1、HTML中定义表格的宽度用80px和80%的区别是什么？ 11 2、CSS样式定义优先级顺序是？ 12 3、div和span的区别？ 12 4、CSS选择器包括？ 12 5、用css3语法中，如何实现一个矩形框的圆角...

spring_MVC源码

-- 这里在配成spring,下边也要写一个名为spring-servlet.xml的文件，主要用来配置它的controller --> 19. *.do</url-pattern> 20. </servlet-mapping> 21. <welcome-file-list> 22. <welcome-file>index.jsp...

Web程序设计计算机科学经典教材.doc

14 1.8 安全性 15 1.9 Web编程工具箱 17 1.9.1 XHTML概述 17 1.9.2 创建XHTML文档的工具 18 1.9.3 插件和过滤器 19 1.9.4 XML概述 19 1.9.5 JavaScript概述 20 1.9.6 Flash概述 20 1.9.7 PHP概述 21 1.9.8 Ajax概述 ...

深入浅出Struts 2 .pdf(原书扫描版) part 1

这是因为某个servlet（服务器端Java程序）在应用户的请求而首次调入内存执行之后将一直驻留在内存里，对同一个servlet的后续请求不用再对这个servlet的类进行实例化，因此响应速度更快。 可是，servlet也存在一个...

深入浅出Struts2(附源码)

作者处处从实战出发，在丰富的示例中直观地探讨了许多实用的技术，如数据类型转换、文件上传和下载、提高Struts 2应用的安全性、调试与性能分析、FreeMarker、Velocity、Ajax，等等。跟随作者一道深入Struts 2，聆听...

Java学习笔记-个人整理的

{14.2}XML的设计}{205}{section.14.2} {14.3}DTD/Schema}{205}{section.14.3} {14.3.1}SAX应用}{206}{subsection.14.3.1} {14.4}dom4j}{207}{section.14.4} {14.5}XPath}{210}{section.14.5} {14.6}apache....

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

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