Build beautiful tree using XSL

Jahbif · Sep 18, 2001

I use a XSL to build a tree to structure my datas.
But I want to display it Windows Explorater (with + and - to show or not sub directories).

I believed you can do that with Java Script, How
?

Thanks for help

yingxiong · Sep 25, 2001

I got it.How to display it Windows Explorater

I'm gona show you the example..

1.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="1.xsl"?>
<BasicInfo ChptrName="Introduction" Owner="yjchoi" CreateDate="9/17/2001 11:24:38 AM">
<Folder Depth="10" Title="HaveSubPage" id="1" Order="3">
<Folder Depth="20" Title="NoSubPage" id="4" Order="3"/>
<page Depth="20" Title="1Page" FileName="FileName" FileType="FileType" Order="2"/>
<Folder Depth="20" Title="HaveSubPage" id="5" Order="1">
<page Depth="30" Title="2Page" FileName="FileName" FileType="FileType" Order="3"/>
<page Depth="30" Title="1Page" FileName="FileName" FileType="FileType" Order="1"/>
<Folder Depth="30" Title="NoSubPage" id="6" Order="2"/></Folder></Folder>
<Folder Depth="10" Title="NoSubPage" id="2" Order="1"/>
<Folder Depth="10" Title="NoSubPage" id="3" Order="4"/>
<page Depth="10" Title="4Page" FileName="FileName" FileType="FileType" Order="2"/></BasicInfo>

1.xsl

<?xml version="1.0"?>
<xsl:transform xmlns:xsl="

http://www.w3.org/1999/XSL/Transform"

version="1.0"
exclude-result-prefixes="xsl">
<xsl

utput method="html" indent="no"/>


<xsl

aram name="vAlias"/>
<xsl:template match="/">
<html>
<head>
<?SelectionLanguage XPath?>
<title>Sample</title>
<xsl:call-template name="script"/>
</head>
<body>
<p style="color:'navy';">Showing contents of <xsl:value-of select="/folders/@name"/>:</p>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="/BasicInfo">
<xsl:apply-templates>
<xsl:sort select="@Order" data-type="text" order="ascending"/>
</xsl:apply-templates>
</xsl:template>

<xsl:template match="//child::Folder">
<xsl:element name="img">
<xsl:attribute name="src"> Space.gif </xsl:attribute>
<xsl:attribute name="width"> <xsl:value-of select="@Depth"/> </xsl:attribute>
<xsl:attribute name="height">10</xsl:attribute>
</xsl:element>
<xsl:element name="img">
<xsl:attribute name="src"> Folder.gif </xsl:attribute>
</xsl:element>
<xsl:element name="a">
<xsl:attribute name="class">linktopic</xsl:attribute>
<xsl:attribute name="onclick">clickCategory('<xsl:value-of select="@id"/>');</xsl:attribute>
<xsl:attribute name="style">cursor:hand;color:navy;</xsl:attribute>
<xsl:text> </xsl:text><xsl:value-of select="@Title"/>
</xsl:element>
<br/>
<xsl:element name="div">
<xsl:attribute name="id"><xsl:value-of select="@id"/>_T</xsl:attribute>
<xsl:attribute name="style">display:'none';</xsl:attribute>
<xsl:apply-templates>
<xsl:sort select="@Order" data-type="text" order="ascending"/>
</xsl:apply-templates>
</xsl:element>
</xsl:template>


<xsl:template match="child:

age">
<xsl:element name="img">
<xsl:attribute name="src"> Space.gif </xsl:attribute>
<xsl:attribute name="width"> <xsl:value-of select="@Depth"/> </xsl:attribute>
<xsl:attribute name="height">10</xsl:attribute>
</xsl:element>
<xsl:element name="img">
<xsl:attribute name="src"> page.gif </xsl:attribute>
</xsl:element>
<xsl:element name="a">
<xsl:attribute name="style">color:blue</xsl:attribute>
<xsl:attribute name="onmouseover">this.style.color='green';</xsl:attribute>
<xsl:attribute name="onmouseout">this.style.color='blue';</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:choose>

<xsl:when test="boolean(@FileName)">
<xsl:attribute name="href"><xsl:value-of select="@FileName"/></xsl:attribute>
</xsl:when>
<xsl

therwise>
<xsl:attribute name="href"><xsl:value-of select="$vAlias"/><xsl:value-of select="parent::Folder/@Depth"/>/<xsl:value-of select="."/></xsl:attribute>
</xsl

therwise>
</xsl:choose>
<xsl:value-of select="@Title"/>
</xsl:element>
<br/>
</xsl:template>
<xsl:template name="script">
<script language="JavaScript">
<![CDATA[
function clickCategory(CatIDStr)
{
var txtObj = document.all(CatIDStr + '_T');
if (txtObj.style.display == 'none'){
txtObj.style.display = '';
}
else{
txtObj.style.display = 'none';
}
window.event.cancelBubble=true;
}
]]>
</script>
</xsl:template>

</xsl:transform>

I think you had better to have 3 image files to test the example

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Build beautiful tree using XSL

Jahbif

Programmer

yingxiong

Programmer

Similar threads

Part and Inventory Search

Sponsor