convert XML to a tree in html

tommytrance · Sep 9, 2003

Hi Folks,
I am creating an XML doc from an ORacle database. It has a tree structure up to 4 levels deep. It works perfectly. What I need to do though is to convert it into an HTML file that still represents the hierarchy. My users want to be able to expand the tree elements they want to see and then print the result. I could do this in XML but they will see the tags.

So, basic quesion is........

How do I convert an XML doc into a HTML tree (if such a thing exists)

Cheers

Tom Mcguire
Arete Software Ltd

palbano · Sep 9, 2003

So you have two issues. How to do an HTML tree is the main one. Once you know what HTML you need to represent your data then writing the XSL(T) should be fairly simple. I have done an HTML tree for IE but not a cross browser one and I really REALLY don’t want to [lol]

-pete

jel · Sep 9, 2003

Uh... of course you can use an xsl-stylesheet to build that tree, (it's not that difficult, but a tedious job) but did you notice that you can open an xml-document in IE?

Anyway, if you really need an xsl-stylesheet to build a treeview let me know, I might have saved an attempt to do so somewhere in a dark corner.

jel · Sep 9, 2003

Soory, was a bit in a hurry. Anyway, here's an experiment I once did on making a treeview in HTML. Hope you can make something out of it.

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

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

version="1.0">
<xsl:variable name="intInput" select="9"/>

<xsl:template match="obj_tabel">
<script type="text/javascript">
function TOGGLE(id)
{
if (eval('subs'+id+'.style.display')==''){
eval('subs'+id+'.style.display="none"');
}
else{
eval('subs'+id+'.style.display=""');
};
if (eval("IM"+id+".src&quot

.match("closed.gif","g&quot

!=null){
eval('IM'+id+'.src="open.gif"');
};
else {
if (eval("IM"+id+".src&quot

.match("open.gif","g&quot

!=null){
eval('IM'+id+'.src="closed.gif"');
};
}
}
</script>
<html>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="obj_collectie">
<table border="0" cellpadding="0" cellspacing="0">
<xsl:for-each select="obj_object">
<xsl:sort select="obj_id" data-type="number"/>
<xsl:if test="obj_ouder_obj_id=0">
<xsl:call-template name="MakeBranche">
<xsl:with-param name="col" select="parent:

bj_collectie"></xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:for-each>
</table>
</xsl:template>

<xsl:template name="MakeBranche">
<xsl

aram name="StuffBefore" select="''"/>
<xsl

aram name="col" select="."></xsl

aram>
<xsl:variable name="ouder" select="obj_id"/>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<xsl:variable name="StuffBefore2" select="$StuffBefore"/>
<xsl:call-template name="StuffBefore">
<xsl:with-param name="StuffBefore2" select="$StuffBefore"/>
</xsl:call-template>
<a>
<xsl:variable name="ID" select="obj_id"/>
<xsl:attribute name="onclick"><xsl:text>TOGGLE(</xsl:text><xsl:value-of select="$ID"/><xsl:text>)</xsl:text></xsl:attribute>
<td width="11">
<xsl:choose>
<xsl:when test="count($col/obj_object[obj_ouder_obj_id=$ouder])=0">
<img src="leaf.gif">
<xsl:attribute name="id">IM<xsl:value-of select="$ID"/></xsl:attribute>
</img>
</xsl:when>
<xsl

therwise>
<img src="closed.gif">
<xsl:attribute name="id">IM<xsl:value-of select="$ID"/></xsl:attribute>
</img>
</xsl

therwise>
</xsl:choose>
</td>
<td><xsl:text> </xsl:text><xsl:value-of select="obj_omschrijving"/>
</td>
</a>
</tr>
</table>

<div>
<xsl:attribute name="id"><xsl:text>subs</xsl:text><xsl:value-of select="obj_id"/></xsl:attribute>
<xsl:attribute name="style"><xsl:text>display='none'</xsl:text></xsl:attribute>
<xsl:variable name="number" select="count($col/obj_object[obj_ouder_obj_id=$ouder])"></xsl:variable>
<xsl:variable name="count" select="0"></xsl:variable>
<table border="0" cellpadding="0" cellspacing="0">
<xsl:for-each select="$col/obj_object[obj_ouder_obj_id=$ouder]">
<xsl:sort select="obj_id" data-type="number"/>
<xsl:variable name="child" select="obj_id"></xsl:variable>
<xsl:if test="count($col/obj_object[obj_ouder_obj_id=$child])>0">
<xsl:choose>
<xsl:when test="$number=$count">
<xsl:call-template name="MakeBranche">
<xsl:with-param name="StuffBefore" select="concat($StuffBefore,'A')"/>
<xsl:with-param name="col" select="$col"></xsl:with-param>
</xsl:call-template>

</xsl:when>
<xsl

therwise>
<xsl:call-template name="MakeBranche">
<xsl:with-param name="StuffBefore" select="concat($StuffBefore,'B')"/>
<xsl:with-param name="col" select="$col"></xsl:with-param>
</xsl:call-template>
</xsl

therwise>
</xsl:choose>

</xsl:if>
</xsl:for-each>
<xsl:for-each select="$col/obj_object[obj_ouder_obj_id=$ouder]">
<xsl:sort select="obj_id" data-type="number"/>
<xsl:variable name="child" select="obj_id"></xsl:variable>
<xsl:if test="count($col/obj_object[obj_ouder_obj_id=$child])=0">
<xsl:choose>
<xsl:when test="$number=$count">
<xsl:call-template name="MakeBranche">
<xsl:with-param name="StuffBefore" select="concat($StuffBefore,'A')"/>
<xsl:with-param name="col" select="$col"></xsl:with-param>
</xsl:call-template>

</xsl:when>
<xsl

therwise>
<xsl:call-template name="MakeBranche">
<xsl:with-param name="StuffBefore" select="concat($StuffBefore,'B')"/>
<xsl:with-param name="col" select="$col"></xsl:with-param>
</xsl:call-template>
</xsl

therwise>
</xsl:choose>
$number = $number+1

</xsl:if>
</xsl:for-each>

</table>
</div>
</xsl:template>

<xsl:template name="StuffBefore">
<xsl

aram name="StuffBefore2" select="''"/>

<xsl:if test="string-length($StuffBefore2)>1">

<xsl:if test="starts-with($StuffBefore2,'A')">

<td width="11">
<img src="geenclosed.gif"/>
</td>
</xsl:if>
<xsl:if test="starts-with($StuffBefore2,'B')">

<td width="11"/>
</xsl:if>
</xsl:if>
<xsl:if test="string-length($StuffBefore2)=1">

<xsl:if test="starts-with($StuffBefore2,'A')">

<td width="11">
<img src="zijclosed.gif"/>
</td>
</xsl:if>
<xsl:if test="starts-with($StuffBefore2,'B')">

<td width="11">
<img src="eindclosed.gif"/>
</td>
</xsl:if>
</xsl:if>
<xsl:if test="string-length($StuffBefore2)>1">

<xsl:call-template name="StuffBefore">
<xsl:with-param name="StuffBefore2" select="substring($StuffBefore2,2)"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
</xsl:stylesheet>

jel · Sep 9, 2003

Looking at this mess you might wonder: 'why didn't he finish it proprly?'. The answer is simple: I foud it much easier to dump xml in an ActiveX-treeview-control. ;-)

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!

convert XML to a tree in html

tommytrance

Programmer

palbano

Programmer

jel

Programmer

jel

Programmer

jel

Programmer

Similar threads

Part and Inventory Search

Sponsor