Tree.xml
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type='text/xsl' href='tree.xsl'?>
<TreeView>
<Tree Text="根节点" Expanded="true">
<Tree Text="1.1" Expanded="true">
<Tree Text="1.1.1">
<Tree Text="1.1.1.1">
<Tree target="_blank" URL="http://www.google.com" Text="1.1.1.1.1google"/>
<Tree Text="1.1.1.1.2"/>
</Tree>
<Tree Text="1.1.1.2"/>
</Tree>
<Tree Text="1.1.2"/>
</Tree>
<Tree Text="1.2">
<Tree Text="1.2.1"/>
<Tree Text="1.2.2"/>
</Tree>
</Tree>
</TreeView>
Tree.xsl
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD>
<script>
<xsl:comment>
<![CDATA[
var CurrentNode = null;
var iconLeaf = "<span iconExpand = "<span iconCollapse = "<span Expand(obj)
{
var div = null;
var img = obj;
if(obj.tagName != 'SPAN' || obj.className!='clsSpace')
return (false);
obj = obj.parentElement;
var childRen=obj.children;
for (var i=0;i < childRen.length;i++)
{
if(childRen[i].tagName == 'DIV'){
div = childRen[i];
break;
}
}
if(div == null)
return (false);
if(obj.Expanded.toLowerCase()=='true')
{
if(img!=null) img.innerHTML = iconCollapse;
obj.Expanded='false';
div.className='hide';
}
else
{
if(img!=null) img.innerHTML = iconExpand;
obj.Expanded='true';
div.className='shown'
}
}
function MouseOver(obj)
{
obj.className = "clsMouseOver";
}
function MouseOut(obj)
{
if(!obj.Checked)
obj.className = "clsLabel";
else
obj.className = "clsCurrentHasFocus";
}
function MouseDown(obj)
{
obj.className = "clsMouseDown";
}
function MouseUp(obj)
{
MouseOut(obj);
}
function Click(obj)
{
if(!obj.Checked)
{
if(CurrentNode != null)
{
CurrentNode.Checked = false;
MouseOut(CurrentNode);
}
obj.Checked = true;
CurrentNode = obj;
}
else
obj.Checked = false;
MouseOut(obj);
}
]]>
</xsl:comment>
</script>
<style>
<![CDATA[
BODY
{
cursor:default;
font-size:9pt;
background-color:#F1F1F1;
}
span
{
padding:2px 3px;
position:relative;
display:inline;
top:-2px;
height:17px;
border: solid 1px #f1f1f1;
}
span.clsLabel
{
}
SPAN.clsSpace
{
font-family:verdana;
position:relative;
padding:3px 2px;
top:0px;
width:17px;
margin:0px;
cursor:hand;
overflow:hidden;
}
span.clsSpace span
{
position:relative;
width:11px;
height:11px;
border:solid 1px black;
background-color:#ffffff;
}
SPAN.clsCollapse
{
line-height:6px;
font-size:9px;
overflow:hidden;
padding:1px;
}
SPAN.clsExpand
{
padding-left:1px;
overflow:hidden;
line-height:3px;
font-size:13px;
padding-top:3px;
}
SPAN.clsLeaf
{
overflow:visible;
font-size:9px;
line-height:3px;
padding: 1px 0px 0px 3px;
}
SPAN.clsMouseOver
{
background-color:#CCCCCC;
border:1px solid #999999;
}
SPAN.clsMouseDown
{
background-color:#999999;
border:1px solid #999999;
}
SPAN.clsCurrentHasFocus
{
background-color:#FFFFFF;
border:1px solid #999999;
}
SPAN.clsCurrentNoFocus
{
background-color:#F1F1F1;
border:1px solid #999999;
}
A
{
color:black;
text-decoration:none;
}
span.clsUnavailable
{
height:0px;
padding:0px;
top:0px;
border:none;
color:#888888;
}
.hide
{
display:none;
}
.shown
{
display:block;
margin-left:15px;
}
.deeptree IMG
{
position:relative;
cursor:hand;
top:-2px;
margin:0px;
padding:0px;
}
.treelabel
{
font-family:verdana;
font-size:70.5%;
color:white;
}
]]>
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<xsl:apply-templates select="/TreeView/Tree"/>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="Tree">
<div type="parent">
<xsl:if expr="this.hasChildNodes">
<xsl:choose>
<xsl:when test="@Expanded">
<xsl:attribute name="Expanded">
<xsl:value-of select="@Expanded"/>
</xsl:attribute>
</xsl:when>
<xsl:otherwise><xsl:attribute name="Expanded">false</xsl:attribute></xsl:otherwise>
</xsl:choose>
</xsl:if>
<span>
<xsl:if expr="this.hasChildNodes">
<xsl:attribute name="onclick">Expand(this)</xsl:attribute>
</xsl:if>
<xsl:attribute name="Class">clsSpace</xsl:attribute>
<xsl:choose>
<xsl:when expr="this.hasChildNodes">
<xsl:choose>
<xsl:when test="@Expanded">
<xsl:choose>
<xsl:when test="@Expanded[.='true']">
<span onmouseover="MouseOver(this)" onclick="Click(this)" onmouseout="MouseOut(this)" onmousedown="MouseDown(this)" onmouseup="MouseUp(this)">
<xsl:attribute name="title"><xsl:value-of select="@Text" /></xsl:attribute>
<xsl:choose>
<xsl:when test="@URL">
<a>
<xsl:choose>
<xsl:when test="@Target">
<xsl:attribute name="target"><xsl:value-of select="@Target" /></xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="target">_blank</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:attribute name="Href">
<xsl:value-of select="@URL"/>
</xsl:attribute>
<xsl:value-of select="@Text"/>
</a>
</xsl:when>
<xsl:otherwise><xsl:value-of select="@Text"/></xsl:otherwise>
</xsl:choose>
</span>
<xsl:if expr="this.hasChildNodes">
<div>
<xsl:choose>
<xsl:when test="@Expanded">
<xsl:choose>
<xsl:when test="@Expanded[.='true']">
<xsl:attribute name="class">shown</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">hide</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">hide</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="@Expanded">
<xsl:attribute name="Expanded">
<xsl:value-of select="@Expanded"/>
</xsl:attribute>
</xsl:when>
<xsl:otherwise><xsl:attribute name="Expanded">false</xsl:attribute></xsl:otherwise>
</xsl:choose>
<xsl:apply-templates select="Tree"></xsl:apply-templates>
</div>
</xsl:if>
</div>
</xsl:template>
</xsl:stylesheet>
