微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 在xslt中扩展/折叠嵌套节点

我有一个以下格式的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>

我想做的是 – 当我打开html时,将Period和SubPeriod折叠,然后在我点击它时展开它们.

我有以下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函数的第一个参数传递.这次我能够扩展子时段,但问题是,它总是指第一个时期的子时段(即使我在第二个或第三个时段内点击).

有人可以帮助我吗?

谢谢!

解决方法:

将您的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):

下一步(单击“期间”链接):

下一步(点击子期间):

似乎没问题,按预期扩展和折叠工作.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。