xml 结构如下:
<?xml version='1.0' encoding='UTF-8'?>
<?xml:stylesheet type="text/xsl" href="good.xsl"?>
<project modelID='' caseno='' casetype='' pm=''>
<custom-parameters>
<param name='shift-width' value='15'/>
<param name='img-directory' value='images/'/>
</custom-parameters>
<tasks>
<task id='1' title='task1' persons='' parent='0' edit='false' expend='true' index='0'>
<task id='2' title='task2' persons='' parent='1' edit='false' expend='true' index='0'>
<task id='4' title='task4' persons='' parent='2' edit='false' expend='false' index='0' />
<task id='5' title='task5' persons='' parent='2' edit='false' expend='false' index='1' />
</task>
<task id='3' title='task2' persons='' parent='1' edit='false' expend='false' index='1' />
<task id='6' title='task2' persons='' parent='1' edit='false' expend='false' index='2' />
</task>
</tasks>
</project>
xslT 样式文件:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:template match="//project" >
<html>
<head>
<script language="javascript" >
function toggle(node) {
var nextDIV = node.nextSibling;
while(nextDIV.nodeName != "DIV") {
nextDIV = nextDIV.nextSibling;
}
if (nextDIV.style.display == 'none') {
if (node.childNodes.length > 0) {
if (node.childNodes.item(0).nodeName == "IMG") {
node.childNodes.item(0).src = "minus.gif";
}
}
nextDIV.style.display = 'block';
}
else {
if (node.childNodes.length > 0) {
if (node.childNodes.item(0).nodeName == "IMG" ) {
if( nextDIV.childNodes.length > 0)
node.childNodes.item(0).src = "plus.gif";
}
}
nextDIV.style.display = 'none';
}
}
</script>
</head>
<body>
<xsl:variable name="shift-width" select="/project/custom-parameters/param[@name='shift-width']/@value"/>
<xsl:variable name="img-directory" select="/project/custom-parameters/param[@name='img-directory']/@value"/>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
<xsl:apply-templates select="tasks/task">
<xsl:with-param name="depth" select="1"/>
<xsl:with-param name="expend" select="true"/>
</xsl:apply-templates>
</td></tr>
</table>
</body></html>
</xsl:template>
<xsl:template match="task">
<xsl:param name="depth" />
<xsl:param name="expend" />
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<xsl:if test="$depth>1"><td width="15*depth"></td>
</xsl:if>
<td valign="top">
<a οnclick="toggle(this);" style="cursor:hand" ><xsl:if test="count(*)>0"><img src="plus.gif" /></xsl:if><xsl:if test="count(*)=0"><img src="minus.gif" /></xsl:if><xsl:value-of select="@title"/></a><input type="text" value="{@title}" /><input type="text" value="{@parent}" /><input type="text" value="{@index}" />
<div><xsl:attribute name="style">display:{$expend};</xsl:attribute>
<xsl:apply-templates select="task">
<xsl:with-param name="depth" select="$depth+1" />
<xsl:with-param name="expend" select="@expend" />
</xsl:apply-templates>
</div>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>