XML 及 XSLT 生成树

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>
 
  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值