发布一棵可以绑定XML文件的树,欢迎讨论测试.

常用功能:

自定义 节点、鼠标指向、离开、选定节点 的样式;
自定义图片文件夹;
(文件夹里的文件:dashminus.gif,dashplus.gif,i.gif,l.gif,lminus.gif,lplus.gif,nc.gif,no.gif,
rc.gif,ro.gif,t.gif,tminus.gif,topic.gif,tplus.gif)
自定义绑定 显示字段(textField),链接字段(urlField),目标字段(targetField);

等等

其他功能大家自己去扩展。

http://www.v-ec.com/dh20156/code/dhxmltreeview/dhxmltreeAN.htm 使用appendChild实现,效率上不是非常理想,一次性载入1000个节点需要1-5秒的时间;

http://www.v-ec.com/dh20156/code/dhxmltreeview/dhxmltreeAJ.htm 使用array join()实现,效率有所提升,一次性载入1000个节点需要1-2秒的时间;


使用异步加载方式载入子节点;

欢迎大家讨论优化。

现发布用array join方式实现的类,用appendChild方式实现的请查看源文件里边,没有分离:

dhtreeview.js

function dhTreeView(xmlfile){

 //执行时间
 this.start_date = new Date().getTime();
 this.end_date = new Date().getTime();
 this.timeused = this.end_date - this.start_date;

 //返回实例名
 var dh = this;
 this.treeTagName = null;

 //定义绑定字段
 this.textField = null;
 this.urlField = null;
 this.target = null;
 this.targetField = null;
 this.allopenurl = false;

 //定义结点样式
 this.cursor = "hand";
 this.border = "none";
 this.backColor = "transparent";
 this.fontColor = "black";
 this.fontFamily = "arial";
 this.fontSize = "12px";

 //定义鼠标指向结点样式
 this.overBorder = "1px solid buttonshadow";
 this.overBackColor = "#cccccc";
 this.overFontColor = "black";
 this.overFontFamily = "arial";
 this.overFontSize = "12px";

 //定义选定结点样式
 this.selectedBorder = "1px solid buttonshadow";
 this.selectedBackColor = "highlight";
 this.selectedFontColor = "highlighttext";
 this.selectedFontFamily = "arial";
 this.selectedFontSize = "12px";

 //定义结点图标文件夹
 this.icoFolder = null;

 //定义当前选定结点
 var selectedflag = null;

 //鼠标指向事件
 this.mouse_over = function(obj){
  if(obj.parentElement.id != selectedflag){
   obj.style.border = this.overBorder;
   obj.style.background = this.overBackColor;
   obj.style.color = this.overFontColor;
   obj.style.fontFamily = this.overFontFamily;
   obj.style.fontSize = this.overFontSize;
  }
 }

 //定义鼠标移开事件
 this.mouse_out = function(obj){
  if(obj.parentElement.id != selectedflag){
   obj.style.border = this.border;
   obj.style.background = this.backColor;
   obj.style.color = this.fontColor;
   obj.style.fontFamily = this.fontFamily;
   obj.style.fontSize = this.fontSize;
  }
 }

 //定义鼠标点击结点图标事件
 this.mouse_clickIco = function(obj,nodetp){
  if(obj.children.length>3){
   var showflag = obj.children[3].style.display;
   if(showflag == "" || showflag == null || showflag == "block"){
    showflag = "none";
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashplus.gif";
      var imgflag2 = "/rc.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tplus.gif";
      var imgflag2 = "/nc.gif";
      break;
     default :
      var imgflag1 = "/lplus.gif";
      var imgflag2 = "/nc.gif";
    }
   }else{
    showflag = "block";
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashminus.gif";
      var imgflag2 = "/ro.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tminus.gif";
      var imgflag2 = "/no.gif";
      break;
     default :
      var imgflag1 = "/lminus.gif";
      var imgflag2 = "/no.gif";
    }
   }
   for(var i=3;i<obj.children.length;i++){
    obj.children[i].style.display = showflag;
   }
   obj.children[0].src = this.icoFolder+imgflag1;
   obj.children[1].src = this.icoFolder+imgflag2;
  }else{
   if(nodetp != "Topic" && nodetp != "LTTopic"){
    this.dataBinding(obj.id,obj);
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashminus.gif";
      var imgflag2 = "/ro.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tminus.gif";
      var imgflag2 = "/no.gif";
      break;
     default :
      var imgflag1 = "/lminus.gif";
      var imgflag2 = "/no.gif";
    }
    obj.children[0].src = this.icoFolder+imgflag1;
    obj.children[1].src = this.icoFolder+imgflag2;
   }
  }
 }

 //定义鼠标点击结点事件
 this.mouse_click = function(obj,nodetp){
  if(obj.children.length>3){
   var showflag = obj.children[3].style.display;
   if(showflag == "" || showflag == null || showflag == "block"){
    showflag = "none";
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashplus.gif";
      var imgflag2 = "/rc.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tplus.gif";
      var imgflag2 = "/nc.gif";
      break;
     default :
      var imgflag1 = "/lplus.gif";
      var imgflag2 = "/nc.gif";
    }
   }else{
    showflag = "block";
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashminus.gif";
      var imgflag2 = "/ro.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tminus.gif";
      var imgflag2 = "/no.gif";
      break;
     default :
      var imgflag1 = "/lminus.gif";
      var imgflag2 = "/no.gif";
    }
   }
   for(var i=3;i<obj.children.length;i++){
    obj.children[i].style.display = showflag;
   }
   obj.children[0].src = this.icoFolder+imgflag1;
   obj.children[1].src = this.icoFolder+imgflag2;
  }else{
   if(nodetp != "Topic" && nodetp != "LTTopic"){
    this.dataBinding(obj.id,obj);
    switch(nodetp){
     case "RTNode" :
      var imgflag1 = "/dashminus.gif";
      var imgflag2 = "/ro.gif";
      break;
     case "ECNode" :
      var imgflag1 = "/tminus.gif";
      var imgflag2 = "/no.gif";
      break;
     default :
      var imgflag1 = "/lminus.gif";
      var imgflag2 = "/no.gif";
    }
    obj.children[0].src = this.icoFolder+imgflag1;
    obj.children[1].src = this.icoFolder+imgflag2;
   }
  }

  if(obj.id != selectedflag){
   if(selectedflag != null){
    var oldobj = document.getElementById(selectedflag);
    oldobj.children[2].style.border = this.border;
    oldobj.children[2].style.background = this.backColor;
    oldobj.children[2].style.color = this.fontColor;
    oldobj.children[2].style.fontFamily = this.fontFamily;
    oldobj.children[2].style.fontSize = this.fontSize;
   }
   obj.children[2].style.border = this.selectedBorder;
   obj.children[2].style.background = this.selectedBackColor;
   obj.children[2].style.color = this.selectedFontColor;
   obj.children[2].style.fontFamily = this.selectedFontFamily;
   obj.children[2].style.fontSize = this.selectedFontSize;
  }
  selectedflag = obj.id;
  this.openurl(obj);
 }

 //打开页面
 this.openurl = function(obj){
  //是否所有节点都运行此函数
  if(obj.url != "" && obj.url != null && obj.target != "" && obj.target != null){
   if(this.allopenurl){
    if(obj.target.indexOf("_") == 0){
     window.open(obj.url, obj.target);
    }else{
     var win = obj.target;
     eval(win).location = obj.url;
    }
   }else{
    if(obj.children.length <= 3){
     if(obj.target.indexOf("_") == 0){
      window.open(obj.url, obj.target);
     }else{
      var win = obj.target;
      eval(win).location = obj.url;
     }
    }
   }
  }
 }

 //定义数据源处理方式,本例为XML
 var xmldom = new ActiveXObject("MSXML.DOMDocument");
 xmldom.async = false;
 var xmlobj = xmldom.load(xmlfile);

 //数据绑定
 this.dataBinding = function(dtNode,obj){
  var nodeobj = dtNode;
  var oldnode = document.getElementById(nodeobj);
  if(oldnode == "[object]"){
   var oldstr = oldnode.innerHTML;

  }else{
   var oldstr = "";
  }

  if(xmlobj){
   dtNode = eval(dtNode);

   var tree = new Array();
   var inum = 0;

   if(this.textField !="" && this.textField != null){
    var caption = dtNode.getAttribute(this.textField);
    if(caption == "" || caption == null){
     caption = "";
    }
   }
   if(this.urlField !="" && this.urlField != null){
    var url = dtNode.getAttribute(this.urlField);
    if(url == "" || url == null){
     url = "";
    }
   }
   if(this.targetField !="" && this.targetField != null){
    var target = dtNode.getAttribute(this.targetField);
    if(target == "" || target == null){
     if(this.target == "" || this.target == null){
      target = "";
     }else{
      target = this.target;
     }
    }
   }

   if(dtNode.parentNode.parentNode == null){
    tree[inum++] = "<UL class=/"dhrtul/"><LI id=/""+nodeobj+"/" url=/""+url+"/" target=/""+target+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/dashminus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'RTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/ro.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/"><span class=/"dhspan/" title=/""+caption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/">" + caption + "</span>";
   }else{
    tree[inum++] = oldstr;
   }

   if(dtNode.hasChildNodes){

    for(var i=0;i < dtNode.childNodes.length;i++){
     inum = inum + 1;

     if(this.textField !="" && this.textField != null){
      var ccaption = dtNode.childNodes[i].getAttribute(this.textField);
      if(ccaption == "" || ccaption == null){
       ccaption = "";
      }
     }
     if(this.urlField !="" && this.urlField != null){
      var curl = dtNode.childNodes[i].getAttribute(this.urlField);
      if(curl == "" || curl == null){
       curl = "";
      }
     }
     if(this.targetField !="" && this.targetField != null){
      var ctarget = dtNode.childNodes[i].getAttribute(this.targetField);
      if(ctarget == "" || ctarget == null){
       if(this.target == "" || this.target == null){
        ctarget = "";
       }else{
        ctarget = this.target;
       }
      }
     }

     //判断节点类型,设置节点图标
     if(dtNode.childNodes[i].hasChildNodes){
      if(dtNode.childNodes[i].parentNode.parentNode != null){
       if(dtNode.childNodes[i].nextSibling != null){
        //var nodetp = "ECNode";
        tree[inum++] = "<UL class=/"dhecul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/tplus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'ECNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/nc.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'ECNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'ECNode');/">" + ccaption + "</span></LI></UL>";
       }else{
        //var nodetp = "LTNode";
        tree[inum++] = "<UL class=/"dhltul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/lplus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'LTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/nc.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTNode');/">" + ccaption + "</span></LI></UL>";
       }
      }else{
       //var nodetp = "RTNode"
       //tree[inum++] = "<UL class=/"dhrtul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/dashminus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'RTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/ro.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/">" + ccaption + "</span></LI></UL>";
      }
     }else{
      if(dtNode.childNodes[i].nextSibling != null){
       //var nodetp = "Topic"
       tree[inum++] = "<UL class=/"dhecul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/t.gif/"><img class=/"dhimg/" src=/""+this.icoFolder+"/topic.gif/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'Topic');/">" + ccaption + "</span></LI></UL>";
      }else{
       //var nodetp = "LTTopic"
       tree[inum++] = "<UL class=/"dhltul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/l.gif/"><img class=/"dhimg/" src=/""+this.icoFolder+"/topic.gif/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTTopic');/">" + ccaption + "</span></LI></UL>";
      }
     }

    }
   }

   if(dtNode.parentNode.parentNode == null){
    tree[inum++] = "</LI></UL>";
   }

   if(eval(obj).tagName == "BODY"){
    document.write(tree.join(""));
   }else{
    obj.innerHTML = tree.join("");
   }
   
  }
 }

 //设置树样式
 this.setStyle = function(){
    var style = new Array();
  style[0] = "<style>/n";
  style[1] = ".dhrtul {list-style:none;margin:0px;padding-bottom:4px;position:relative;left:-20px;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
  style[2] = ".dhecul {list-style:none;margin-left:18px;padding-bottom:4px;background-image:url('"+this.icoFolder+"/i.gif');background-repeat:repeat-y;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
  style[3] = ".dhltul {list-style:none;margin-left:18px;padding-bottom:4px;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
    style[4] = ".dhspan {border:"+this.border+";background:"+this.backColor+";font-family:"+this.fontFamily+";font-size:"+this.fontSize+";color:"+this.fontColor+";cursor:"+this.cursor+";white-space:nowrap;}/n";
  style[5] = ".dhimg {vertical-align:middle;cursor:"+this.cursor+";}/n";
    style[6] = "<//style>/n";
    document.write(style.join(""));
 }

 this.icon={
  ro  :'/ro.gif',
  rc  :'/rc.gif',
  no  :'/no.gif',
  nc  :'/nc.gif',
  t  :'/t.gif',
  l  :'/l.gif',
  tp  :'/tplus.gif',
  tm  :'/tminus.gif',
  lp  :'/lplus.gif',
  lm  :'/lminus.gif',
  dp  :'/dashplus.gif',
  dm  :'/dashminus.gif',
  line  :'/i.gif',
  topic  :'/topic'
 }

 //图片预加载
 this.preLoad = function(){
  var icon = this.icon
  var icoFolder = this.icoFolder;
  for(i in icon){
   var tem = icon[i];
   icon[i] = new Image();
   icon[i].src = icoFolder + tem;
  }
 }

 //对象实例化
 this.setupTo = function(obj){
  this.preLoad();
  this.setStyle();
  if(obj=="" || obj == null){
   obj = "document.body";
  }
  this.dataBinding("xmldom.documentElement",obj);
  this.end_date = new Date().getTime();
  this.timeused = this.end_date - this.start_date;
 }
}

调用:

<script language="javascript" src="dhTreeView.js"></script>
<body>
 <script language="javascript">
  var dhtree = new dhTreeView("tree.xml");
  dhtree.treeTagName = "dhtree";
  dhtree.textField = "text";
  dhtree.urlField = "url";
  dhtree.target = "_blank";
  dhtree.targetField = "target";
  dhtree.allopenurl = true;
  dhtree.icoFolder = "folder";
  dhtree.setupTo(document.body);
 </script>
</body>

 

其他功能大家自己扩展.

期待大家一起讨论更好的方法.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值