扩展/折叠xslt中的嵌套节点 [英] expanding/collapsing nested nodes in xslt
问题描述
我有以下格式的xml；
I have an xml in the following format;
<BasePeriod>
.
.
.
.
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart1 </substart>
<subend> subend1 </subend>
</subperiod>
<type> abc1 </type>
</Period>
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart2 </substart>
<subend> subend2 </subend>
</subperiod>
<type> abc2 </type>
</Period>
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart3 </substart>
<subend> subend3 </subend>
</subperiod>
<type> abc3 </type>
</Period>
</BasePeriod>
我想做的是-在打开html时将Period和SubPeriod折叠起来，然后在单击它们时将其展开.
What I would like to do is - have the Period and SubPeriod collapsed when I open the html and then expand them when I click on it.
我有以下xslt:
<xsl:for-each select="SvcPeriods/BasePeriod">
<tr>
<td>
<xsl:value-of select="startDate"/>
</td>
<td>
<xsl:value-of select="endDate"/>
</td>
<td>
<a href="javascript:expandIt(per_expand{position()}), period_expand{position()}" name="period_expand{position()}" class="expandit">Periods</a>
<div id="per_expand{position()}" style="display:none;" >
<table>
<thead>
<tr>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Sub Periods
</th>
<th>
Type
</th>
</tr>
</thead>
<xsl:for-each select="Period">
<tr>
<td>
<xsl:value-of select="start"/>
</td>
<td>
<xsl:value-of select="end"/>
</td>
<td>
<a href="javascript:expandIt(subper_expand{position()}), subperiod_expand{position()}" name="subperiod_expand{position()}" class="expandit">Sub Periods</a>
<div id="subper_expand{position()}" style="display:none;" >
<table>
<tr>
<th >
Start Date
</th>
<th >
End Date
</th>
</tr>
<xsl:for-each select="subperiod">
<tr>
<td>
<xsl:value-of select="substart"/>
</td>
<td>
<xsl:value-of select="subend"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</td>
<td>
<xsl:value-of select="type"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</td>
</tr>
</xsl:for-each>
<script language="JavaScript">
function expandIt(whichEl, link) {
whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
if ( link ) {
if ( link.innerHTML ) {
if ( whichEl.style.display == "none" ) {
link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
} else {
link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
}
}
}
}
</script>
使用上述方法，我无法扩展子期间.然后，我尝试将 document.getElementById(subper_expand {position()}')传递给 expandit 函数的第一个参数.这次我可以扩展子时段，但问题是，它始终指的是第一个时段的子时段(即使在第二个或第三个时段内单击时也是如此).
With the above, I'm not able to expand the sub period. I then tried passing document.getElementById(subper_expand{position()}') as the first argument to the expandit function. This time I'm able to expand the sub period, but the issue is, that it always refers to the sub period of the first period (even when I'm clicking inside the 2nd or 3rd period).
有人可以帮我吗?
谢谢！
推荐答案
将您的XSL分成多个模板
优良作法是使用许多模板，而不要使用带有隐藏" < xsl:for-each> 元素的模板.
基本期限:
<xsl:template match="SvcPeriods/BasePeriod">
<tr>
<td>
<xsl:value-of select="startDate"/>
</td>
<td>
<xsl:value-of select="endDate"/>
</td>
<td>
<a href="javascript:expandIt(per_expand{position()},
per_expand{position()})"
name="period_expand{position()}" class="expandit">Periods</a>
<div id="per_expand{position()}" style="display:none;">
<table>
<tr>
<th> Start Date </th>
<th> End Date </th>
<th> Sub Periods </th>
<th> Type </th>
</tr>
<xsl:apply-templates select="Period"/>
</table>
</div>
</td>
</tr>
<xsl:call-template name="expandIt"/>
</xsl:template>
期间:
<xsl:template match="Period">
<tr>
<td>
<xsl:value-of select="start"/>
</td>
<td>
<xsl:value-of select="end"/>
</td>
<td>
<a href="javascript:expandIt(subper_expand{position()},
subperiod_expand{position()})"
name="subperiod_expand{position()}"
class="expandit">Sub Periods</a>
<div id="subper_expand{position()}" style="display:none;">
<table>
<tr>
<th> Start Date </th>
<th> End Date </th>
</tr>
<xsl:apply-templates select="subperiod"/>
</table>
</div>
</td>
<td>
<xsl:value-of select="type"/>
</td>
</tr>
</xsl:template>
子时期:
<xsl:template match="subperiod">
<tr>
<td>
<xsl:value-of select="substart"/>
</td>
<td>
<xsl:value-of select="subend"/>
</td>
</tr>
</xsl:template>
expandIt:
<xsl:template name="expandIt">
<script language="JavaScript">
function expandIt(whichEl, link) {
whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
if ( link ) {
if ( link.innerHTML ) {
if ( whichEl.style.display == "none" ) {
link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
} else {
link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
}
}
}
}
</script>
</xsl:template>
如您所见，我改变了:
As you see I changed:
<a href="javascript:expandIt(subper_expand{position()}),
subperiod_expand{position()}"
收件人:
<a href="javascript:expandIt(subper_expand{position()},
subperiod_expand{position()})"
(与per_expand相同).结果(使用Opera):
(same for per_expand). Result (using Opera):
下一步(单击句点"链接):
Next (clicking Periods link):
下一步(点击子句):
看起来不错，可以按预期扩展和折叠工作.
It seems to be ok, expanding and collapsing work as expected.
这篇关于扩展/折叠xslt中的嵌套节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
