以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XML基础 』  (http://bbs.xml.org.cn/list.asp?boardid=1)
----  贴上我完成后的XML树代码给大家分享（XML放在字符串里）  (http://bbs.xml.org.cn/dispbbs.asp?boardid=1&rootid=&id=63906)

--  作者：tuxiaohui
--  发布时间：6/20/2008 8:56:00 AM

--  贴上我完成后的XML树代码给大家分享（XML放在字符串里）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XML生成树状菜单</title>
<style type="text/css">
#TreeMenu {
 font-size: 12px;
 width: 200px;
 border: 1px dashed #666666;
 padding: 10px;
}
#TreeMenu a
{
 color: #666666;
 text-decoration: none;
}
#TreeMenu a:hover
{
 color: #666666;
 text-decoration: underline;
}
#TreeMenu b
{
 color: #333333;
}
</style>
<script type="text/javascript">
function toXML(strxml)
{
  try
  {
     var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
     if(false==xmlDoc.loadXML(strxml))
  {
   alert("失败");
  }
  else
  {
   alert("成功");
  }
  }
  catch(e)
  {
     var oParser=new DOMParser();
     xmlDoc=oParser.parseFromString(strxml,"text/xml");
  }
  return xmlDoc;
}
//var str="<?=$str?>";
var str="<\?xml version='1.0'\?><list><parent id='1' name='DTU设备'><first id='11' name='广东省DTU'><second id='111' name='D广州市'><third id='1111' name='D花都区'></third><third id='1112' name='D天河区'></third><third id='1113' name='D越秀区'></third></second><second id='112' name='D深圳市'><third id='1121' name='D宝安区'></third><third id='1122' name='D福田区'></third><third id='1123' name='D罗湖区'></third><third id='1124' name='D盐田区'></third><third id='1125' name='D盐田区'></third><third id='1126' name='D盐田区'></third><third id='1127' name='D盐田区'></third><third id='1128' name='D王八区'></third></second><second id='113' name='D佛山市'></second></first><first id='12' name='广西省DTU'><second id='121' name='D南宁市'></second><second id='122' name='D贵港市'></second><second id='123' name='D桂林市'></second></first><first id='13' name='四川省DTU'><second id='131' name='D成都市'></second><second id='132' name='D重庆市'></second><second id='133' name='D江津市'></second></first></parent><parent id='2' name='Router设备'><first id='21' name='广东省Router'><second id='211' name='R惠州市'></second><second id='212' name='R广州市'></second><second id='213' name='R深圳市'></second><second id='214' name='R佛山市'></second></first><first id='22' name='广西省Router'><second id='221' name='R南宁市'></second><second id='222' name='R桂林市'></second><second id='223' name='R玉林市'></second></first></parent><parent id='3' name='Video设备'><first id='31' name='广西省Video'></first><first id='32' name='广东省Video'><second id='321' name='V广州市'></second><second id='322' name='V深圳市'></second><second id='323' name='V东莞市'></second></first></parent></list>";
var xmlDoc=toXML(str);
var rootNode= xmlDoc.lastChild;
var rootNode1= xmlDoc.lastChild.childNodes.length;
alert (rootNode1);
//返回树形结构的HTML代码，参数node为节点名,level为当前节点相对于根节点的深度值
function BuilderTree(nodeName,level)
{
 //子菜单项，缩进的像素数
 var indent=10;
 var temp="";
 level=level==null ? 0 : level;
 var nodes=nodeName.childNodes;
 for(var i=0;i<nodes.length;i++)
 {
  //当该节点没下级节点时
  if(nodes[i].childNodes.length<1)
  {
  //当前菜单的名称
  temp+="<div id='"+nodes[i].getAttribute("id")+"' style='margin-left:"+level*indent+"px;cursor:hand;''>";
  temp+="<b>-</b> ";
  temp+=nodes[i].getAttribute("name");
  temp+="</div>";
  continue;
  }
  //当前菜单的名称
  temp+="<div id='"+nodes[i].getAttribute("id")+"' style='margin-left:"+level*indent+"px;cursor:hand;' onclick='show(this)'>";
  temp+="<b>+</b> <b>"+nodes[i].getAttribute("name")+"</b>";
  temp+="</div>";
  //当前菜单的下级内容
  temp+="<div style='margin-left:"+indent+"px;cursor:hand;display:none'>";
  temp+=BuilderTree(nodes[i],level+1);
  temp+="</div>";
 }
 return temp;
}

//操作某个节点的下一节点nextSibling是否显示；
function show(obj)
{
 //当前节点的下一节点
 var nextNode=obj.nextSibling;
 //当前节点的头部符号节点，就是菜单项前面+、-号
 var subNode=obj.firstChild.firstChild;
 if(nextNode.nodeType==1)
 {
  with(eval(nextNode))
  {
    if(style.display=="")
    {
     style.display="none";
     subNode.nodeValue="+";
    }else
    {
     style.display="";
     subNode.nodeValue="-";
    }
  }
 }
}
</script>
<script type="text/javascript" language="javascript" defer="defer">
//将处理过的XML数据，插入到页面的相应位置
var d=document.getElementById("TreeMenu");
d.innerHTML=BuilderTree(rootNode);
</script>
</head>
<body>
<div id="TreeMenu"></div>
</body>
</html>

--  作者：tuxiaohui
--  发布时间：6/20/2008 8:59:00 AM

--  

不过有个问题，就是我这个树不能对XML树的节点进行选择和操作，我打算把他放在一个select框里面，不过我改用<option>来装各个节点结果没有显示，请问各位有什么解决的办法没有？？？能否给个思路或建议，最好贴出代码，再次感谢
--  作者：Qr
--  发布时间：6/20/2008 7:56:00 PM

--  
你到网上搜索一下＂多级联动＂的示例就有了．
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms