xml+xsl+js==>树形菜单
Tree.html
<html>
<head>
<script language = 'javascript '>
function doLoad()
{
var xmldom=new ActiveXObject( "Microsoft.XMLDOM ");
xmldom.load( "xmltree.xml ");
var xsldom=new ActiveXObject( "Microsoft.XMLDOM ");
xsldom.load( "style.xsl ");
document.write(xmldom.transformNode(xsldom));
}
</script>
</head>
<body onload = doLoad()>
<body>
</html>
xmltree.xml
<?xml version= "1.0 " encoding= "GB2312 "?>
<?xml-stylesheet type= "text/xsl " href= "style.xsl "?>
<Troot>
<Item id= "1 " pid= "0 " c= "1 "> 大学 </Item>
<Item id= "2 " pid= "0 " c= "3 "> 中学 </Item>
<Item id= "3 " pid= "0 " c= "3 "> 小学 </Item>
<Item id= "4 " pid= "2 " c= "2 "> 高中 </Item>
<Item id= "5 " pid= "2 " c= "5 "> 初中 </Item>
<Item id= "6 " pid= "15 " c= "3 "> 清华大学 </Item>
<Item id= "7 " pid= "15 " c= "4 "> 北京大学 </Item>
<Item id= "8 " pid= "5 " c= "3 "> 天津铁三中 </Item>
<Item id= "9 " pid= "4 " c= "3 "> 天津市二中 </Item>
<Item id= "10 " pid= "16 " c= "2 "> 天津音乐学院 </Item>
<Item id= "11 " pid= "15 " c= "5 "> 天津商学院 </Item>
<Item id= "12 " pid= "4 " c= "3 "> 耀华中学 </Item>
<Item id= "13 " pid= "3 " c= "6 "> 昆纬路小学 </Item>
<Item id= "14 " pid= "2 " c= "6 "> 七中 </Item>
<Item id= "15 " pid= "1 " c= "1 "> 综合类院校 </Item>
<Item id= "16 " pid= "1 " c= "1 "> 艺术类院校 </Item>
<Item id= "17 " pid= "15 " c= "4 "> 医科大学 </Item>
<Item id= "18 " pid= "15 " c= "4 "> 天津师范大学 </Item>
<Item id= "19 " pid= "15 " c= "23 "> 天津大学 </Item>
<Item id= "20 " pid= "15 " c= "7 "> 南开大学 </Item>
<Item id= "21 " pid= "4 " c= "23 "> 天津铁一中 </Item>
<Item id= "22 " pid= "5 " c= "5 "> 天津铁一中 </Item>
<Item id= "23 " pid= "3 " c= "3 "> 天津市铁路职工子弟第三小学 </Item>
<Item id= "24 " pid= "3 " c= "3 "> 天津市铁路职工子弟第一小学 </Item>
<Item id= "25 " pid= "16 " c= "3 "> 美术学院 </Item>
<Item id= "26 " pid= "16 " c= "3 "> 体育学院 </Item>
<Item id= "0 " pid= "-1 " c= "2 "> 学校 </Item>
</Troot>
style.xsl
<xsl:stylesheet version= "1.0 " xmlns:xsl= "http://www.w3.org/1999/XSL/Transform ">
<xsl:output method= "html " version= "4.0 " encoding= "GB2312 "/>
<xsl:template match= "/ ">
<html>
<head>
<title> XMLTREE </title>
<style>
<xsl:comment> <![CDATA[
h1
{
display:list-item;
padding:2px;
list-style:none;
}
span.clsP
{
list-style-type:square;
color:#222;
}
span.clsC
{
list-style-type:disc;
color: #00b;
}
span
{
padding: 2px;
font: 9pt;
cursor: default;
text-decoration:none;
margin: 0px;
margin-left: 16px;
}
div
{
margin-left: 18px;
border-left: 1px solid #ddd;
border-bottom:1px solid;
border-bottom-color:expression(document.bgColor);
display:block;
} ]]> </xsl:comment>
</style>
</head>
<body onselectstart= "return false; ">
<xsl:call-template name= "NextPID ">
<xsl:with-param name= "mPID "> -1 </xsl:with-param>
<xsl:with-param name= "mNum "> 0 </xsl:with-param>
</xsl:call-template>
</body>
</html>
</xsl:template>
<xsl:template name= "NextPID ">
<xsl:param name= "mPID "/>
<xsl:param name= "mNum "/>
<xsl:for-each select= "//Troot/Item[@pid = $mPID] ">
<xsl:sort select= "count(//Troot/Item[@pid = current()/@id]) " order= "descending " data-type= "number "/>
<!-- 首先按拥有孩子的数量来排序 -->
<xsl:sort select= "@id " order= "ascending "/>
<xsl:choose>
<xsl:when test= "count(//Troot/Item[@pid = current()/@id]) > 0 ">
<!-- 有孩子的节点 -->
<h1>
<span class= "clsP ">
<xsl:value-of select= ". "/>
</span>
</h1>
<div>
<xsl:call-template name= "NextPID ">
<xsl:with-param name= "mPID ">
<xsl:value-of select= "@id "/>
</xsl:with-param>
<xsl:with-param name= "mNum ">
<xsl:value-of select= "$mNum + @c "/>
</xsl:with-param>
</xsl:call-template>
</div>
</xsl:when>
<xsl:otherwise>
<!-- 孤单的节点 -->
<h1>
<span class= "clsC ">
<xsl:value-of select= ". "/>
</span>
</h1>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
现在我的树都是展开的 各位高人 大家帮忙实现 "展开 " "合并 "功能 最好当我点击每一个标签时都能提示出 当前点击的标签名称 先谢了
[解决办法]
我把你上面的程序拷过去运行了下
为什么html没有结果显示呢？
[解决办法]
http://www.xml.org.cn/dispbbs.asp?boardID=32&ID=5346
这里有一份完整实现的，楼主可以参考一下
借花献佛
