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

<body>
<script language="javascript">function xmlTree(xmlfile){
//author:dh20156
var dh = this; //定义节点显示字段，链接字段，目标
this.textField = null;
this.urlField = null;
this.targetField = null;
this.allopenurl = false; //定义默认状态下样式
this.caption = "null";
this.cursor = "hand";
this.border = "none";
this.backColor = "transparent";
this.fontFamily = "arial";
this.fontSize = "8pt";
this.fontColor = "black"; //定义鼠标指向时样式
this.overBorder = "1px solid buttonshadow";
this.overBackColor = "#cccccc";
this.overFontColor = "black"; //定义鼠标移开时样式
//鼠标移开时回到默认状态下样式 //定义选定时样式
this.selectedBorder = "1px solid buttonshadow";
this.selectedBackColor = "highlight";
this.selectedFontColor = "highlighttext"; //定义图标文件夹
this.icoFolder = null; //定义当前选定节点
var selectedflag = null; //鼠标指向事件(设置节点样式)
function mouse_over(obj){
if(obj.parentElement.parentElement.id != selectedflag){
obj.style.border = dh.overBorder;
obj.style.background = dh.overBackColor;
obj.style.color = dh.overFontColor;
}
} //鼠标移开事件(设置节点样式)
function mouse_out(obj){
if(obj.parentElement.parentElement.id != selectedflag){
obj.style.border = dh.border;
obj.style.background = dh.backColor;
obj.style.color = dh.fontColor;
}
}

解决方案 »

  1.   


    //鼠标点击展开收起图标事件(展开，收起节点)
    function mouse_clickIco(obj,nodetp){
    if(obj.children.length>1){
    var showflag = obj.children[1].style.display;
    if(showflag == "" || showflag == "block" || showflag == null){
    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=1;i<obj.children.length;i++){
    obj.children[i].style.display = showflag;
    }
    obj.children[0].children[0].src = dh.icoFolder+imgflag1;
    obj.children[0].children[1].src = dh.icoFolder+imgflag2;
    }
    } //鼠标点击事件(展开，收起节点，设置选定节点样式)
    function mouse_click(obj,nodetp){
    if(obj.children.length>1){
    var showflag = obj.children[1].style.display;
    if(showflag == "" || showflag == "block" || showflag == null){
    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=1;i<obj.children.length;i++){
    obj.children[i].style.display = showflag;
    }
    obj.children[0].children[0].src = dh.icoFolder+imgflag1;
    obj.children[0].children[1].src = dh.icoFolder+imgflag2;
    }
    if(obj.id != selectedflag){
    if(selectedflag != null){
    var oldobj = document.getElementById(selectedflag);
    oldobj.children[0].children[2].style.border = dh.border;
    oldobj.children[0].children[2].style.background = dh.backColor;
    oldobj.children[0].children[2].style.color = dh.fontColor;
    }
    obj.children[0].children[2].style.border = dh.selectedBorder;
    obj.children[0].children[2].style.background = dh.selectedBackColor;
    obj.children[0].children[2].style.color = dh.selectedFontColor;
    }
    selectedflag = obj.id;
    } //展开子节点
    function expandnode(obj){
    if(obj.children.length < 2){
    dh.dataBinding(obj.id,obj);
    if(obj.children.length>1){
    obj.children[1].style.display = "none";
    }
    }
    } //打开页面
    function openurl(obj){
    //是否所有节点都运行此函数
    if(dh.allopenurl){

    }else{
    if(obj.children.length < 2){
    window.open(obj.url, obj.target);
    }
    }
    } //设置样式
    this.setStyle = function(obj,nodetp){
    switch(nodetp){
    case "RTNode" :
    obj.style.margin = "0px";
    obj.children[0].innerHTML = "<img src=\""+this.icoFolder+"/dashminus.gif\" border=\"0\" align=\"absmiddle\"><img src=\""+this.icoFolder+"/ro.gif\" border=\"0\" align=\"absmiddle\"><span style=\"padding-left:4px;\">" + dh.caption + "</span>";
    break;
    case "ECNode" :
    obj.style.marginLeft = "18px";
    obj.style.backgroundImage = "url('"+this.icoFolder+"/i.gif')";
    obj.style.backgroundRepeat = "repeat-y";
    obj.children[0].innerHTML = "<img src=\""+this.icoFolder+"/tplus.gif\" border=\"0\" align=\"absmiddle\"><img src=\""+this.icoFolder+"/nc.gif\" border=\"0\" align=\"absmiddle\"><span style=\"padding-left:4px;\">" + dh.caption + "</span>";
    break;
    case "LTNode" :
    obj.style.marginLeft = "18px";
    obj.children[0].innerHTML = "<img src=\""+this.icoFolder+"/lplus.gif\" border=\"0\" align=\"absmiddle\"><img src=\""+this.icoFolder+"/nc.gif\" border=\"0\" align=\"absmiddle\"><span style=\"padding-left:4px;\">" + dh.caption + "</span>";
    break;
    case "Topic" :
    obj.style.marginLeft = "18px";
    obj.style.backgroundImage = "url('"+this.icoFolder+"/i.gif')";
    obj.style.backgroundRepeat = "repeat-y";
    obj.children[0].innerHTML = "<img src=\""+this.icoFolder+"/t.gif\" border=\"0\" align=\"absmiddle\"><img src=\""+this.icoFolder+"/topic.gif\" border=\"0\" align=\"absmiddle\"><span style=\"padding-left:4px;\">" + dh.caption + "</span>";
    break;
    default :
    //LTTopic
    obj.style.marginLeft = "18px";
    obj.children[0].innerHTML = "<img src=\""+this.icoFolder+"/l.gif\" border=\"0\" align=\"absmiddle\"><img src=\""+this.icoFolder+"/topic.gif\" border=\"0\" align=\"absmiddle\"><span style=\"padding-left:4px;\">" + dh.caption + "</span>";
    }
    obj.style.listStyle = "none";
    obj.style.paddingBottom = "4px";
    obj.children[0].children[0].style.cursor = this.cursor;
    obj.children[0].children[1].style.cursor = this.cursor;
    obj.children[0].children[2].style.cursor = this.cursor;
    obj.children[0].children[2].onmouseover = function(){mouse_over(this);}
    obj.children[0].children[2].onmouseout = function(){mouse_out(this);}
    obj.children[0].children[0].onclick = function(){expandnode(this.parentElement.parentElement);mouse_clickIco(this.parentElement.parentElement,nodetp);}
    obj.children[0].children[1].onclick = function(){expandnode(this.parentElement.parentElement);mouse_click(this.parentElement.parentElement,nodetp);}
    obj.children[0].children[2].onclick = function(){expandnode(this.parentElement.parentElement);mouse_click(this.parentElement.parentElement,nodetp);openurl(this.parentElement.parentElement);}
    }
      

  2.   


    //定义数据源处理方式，本例为XML
    var xmldom = new ActiveXObject("MSXML.DOMDocument");
    xmldom.async = false;
    var xmlobj = xmldom.load(xmlfile); //数据绑定
    this.dataBinding = function(dtNode,obj){
    var nodeobj = dtNode;
    if(xmlobj){
    dtNode = eval(dtNode); //判断是否为根目录
    if(dtNode.parentNode.parentNode == null){
    if(this.textField !="" && this.textField != null){
    var caption = dtNode.getAttribute(this.textField);
    }
    if(this.urlField !="" && this.urlField != null){
    var url = dtNode.getAttribute(this.urlField);
    }
    if(this.targetField !="" && this.targetField != null){
    var target = dtNode.getAttribute(this.targetField);
    }
    var ul = document.createElement("UL");
    ul.id = nodeobj;
    ul.url = url;
    ul.target = target;
    var li = document.createElement("LI");
    this.caption = caption;
    ul.appendChild(li);
    var nodetp = "RTNode"
    this.setStyle(ul,nodetp);
    } if(dtNode.hasChildNodes){
    //获得下一级所有子节点
    for(var i=0;i < dtNode.childNodes.length;i++){
    if(this.textField !="" && this.textField != null){
    var ccaption = dtNode.childNodes[i].getAttribute(this.textField);
    }
    if(this.urlField !="" && this.urlField != null){
    var curl = dtNode.childNodes[i].getAttribute(this.urlField);
    }
    if(this.targetField !="" && this.targetField != null){
    var ctarget = dtNode.childNodes[i].getAttribute(this.targetField);
    }
    var cul = document.createElement("UL");
    cul.id = nodeobj + ".childNodes[" + i + "]";
    cul.url = curl;
    cul.target = ctarget;
    var cli = document.createElement("LI");
    this.caption = ccaption;
    cul.appendChild(cli); //判断节点类型，设置节点图标
    if(dtNode.childNodes[i].hasChildNodes){
    if(dtNode.childNodes[i].parentNode.parentNode != null){
    if(dtNode.childNodes[i].nextSibling != null){
    var cnodetp = "ECNode";
    }else{
    var cnodetp = "LTNode";
    }
    }else{
    var cnodetp = "RTNode"
    }
    }else{
    if(dtNode.childNodes[i].nextSibling != null){
    var cnodetp = "Topic"
    }else{
    var cnodetp = "LTTopic"
    }
    } this.setStyle(cul,cnodetp); if(ul=="[object]"){
    ul.appendChild(cul);
    }else{
    obj.appendChild(cul);
    }
    }
    }
    if(ul=="[object]"){
    obj.appendChild(ul);
    }
    }
    } //对象实例化
    this.setupTo = function(obj){
    dh.dataBinding("xmldom.documentElement",obj)
    }
    }var xds = new xmlTree("tree.xml");
    xds.textField = "text";
    xds.urlField = "url";
    xds.targetField = "target";
    xds.icoFolder = "images/csdn";
    xds.setupTo(document.body);</script></body>
      

  3.   

    function openurl(obj)漏了一点，补充一下： //打开页面
    function openurl(obj){
    //是否所有节点都运行此函数
    if(dh.allopenurl){
    window.open(obj.url, obj.target);
    }else{
    if(obj.children.length < 2){
    window.open(obj.url, obj.target);
    }
    }
    }
      

  4.   

    //定义数据源处理方式，本例为XML
    var xmldom = new ActiveXObject("MSXML.DOMDocument");
    xmldom.async = false;
    var xmlobj = xmldom.load(xmlfile);=>
    建议加入firefox的支持
      

  5.   

    有几处修改：
    设置样式中忘记将字体效果等添加进去：
    this.setStyle = function(obj,nodetp){
    ..............
    obj.children[0].children[2].style.border = this.border;
    obj.children[0].children[2].style.background = this.backColor;
    obj.children[0].children[2].style.color = this.fontColor;
    obj.children[0].children[2].style.fontFamily = this.fontFamily;
    obj.children[0].children[2].style.fontSize = this.fontSize;
    }打开页面函数修改，加入判断是_???类型还是用户指定类型目标窗口：
    function openurl(obj){
    //是否所有节点都运行此函数
    if(dh.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 < 2){
    if(obj.target.indexOf("_") == 0){
    window.open(obj.url, obj.target);
    }else{
    var win = obj.target;
    eval(win).location = obj.url;
    }
    }
    }
    }效果请参见：
    http://www.v-ec.com/dhtree/
      

  6.   

    改进：用Array join生成，效率提升很多。http://www.v-ec.com/dhtree/dhtree.htm  用appendChild方式；http://www.v-ec.com/dhtree/treeview.htm 用Array join方式；