扩展/折叠xslt中的嵌套节点

Question

我有以下格式的xml；

<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>

我想做的是-让句点和SubPeriod崩溃时，我打开html，然后展开他们，当我点击它。

我有以下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函数。这一次，我可以扩展子周期，但问题是，它总是指第一个周期的子周期(即使我在第二个或第三个周期内单击)。

有人能帮我一下吗。

谢谢!

Answer 1

将XSL分解为多个模板

很好的做法是使用许多模板而不是一个带有“隐藏”<xsl:for-each>元素的模板。

BasePeriod:

<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>

如你所见，我改变了：

<a href="javascript:expandIt(subper_expand{position()}),
    subperiod_expand{position()}"

至：

<a href="javascript:expandIt(subper_expand{position()},
    subperiod_expand{position()})"

(per_expand也一样)。结果(使用Opera)：

​

​

下一步(单击句点链接)：

​

​

下一步(单击子周期)：

​

​

这似乎是正常的，扩大和崩溃的工作，如预期。