expanding/collapsing nested nodes in xslt

前端 未结 1 1659
旧巷少年郎
旧巷少年郎 2020-12-22 09:48

I have an xml in the following format;


.
.
.
.

     stdate1 
     endate1 

        
相关标签:
1条回答
  • 2020-12-22 10:22

    Break your XSL into multiple templates

    It's good practice to use many templates rather then one with "hidden" <xsl:for-each> elements.

    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>
    

    Period:

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

    subperiod:

    <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()}"
    

    to:

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

    (same for per_expand). Result (using Opera):

    enter image description here

    Next (clicking Periods link):

    enter image description here

    Next (clicking sub periods):

    enter image description here

    It seems to be ok, expanding and collapsing work as expected.

    0 讨论(0)
提交回复
热议问题