<!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>
[返回] 计算机科学论坛 →
XML.ORG.CN讨论区 - XML技术 → 『 XML基础 』 → 贴上我完成后的XML树代码给大家分享（XML放在字符串里）
(订阅本版)
2008/6/20 8:56:00
新浪微博
贴上我完成后的XML树代码给大家分享（XML放在字符串里）
