在XSLT中创建可折叠区域（以HTML格式） [英] Creating collapsible areas (in HTML) in XSLT

问题描述

大家好，我正在尝试在XSLT中做一些有点棘手的事情，那就是在HTML文档中创建可折叠区域。

基本上我的源XML包含很多节点集集合以及我想要做的是显示集合中的第一个条目，然后在此旁边我有一个+/-图像，用户可以单击该图像来展开/折叠元素。到目前为止，我已经得到了这个，但是已经遇到了一堵砖墙，因为不知道现在该做什么。我有以下XML。

Hi all,

I am trying do something a little tricky in XSLT and that is to create collapsible area's in a HTML document.

Basically my source XML contains many node set collections and what I want to do is to display the first entry in the collection and then beside this I have a +/- image which users can click on to expand/collapse the element. I have gotten so far with this, but have come up against a brick wall as not sure what to do now. I have the following XML.

<Dto01 value="20080829">
          <Rating Date="20080829">
            <Rating value="90" />
            <CreditZone value="4" />
            <Date value="20080829" />
          </Rating>
          <Rating Date="20050812">
            <Rating value="96" />
            <CreditZone value="5" />
            <Date value="20050812" />
          </Rating>
	  ...
 	  ...
</Dto01>

所以我想只显示此系列中的第一个条目，但是一旦用户点击+/-按钮，就会显示更多。

以下是我目前拥有的XSLT ...

So I would like to have only the first entry in this collection to show, but once the user clicks the +/- button, more show.

The following is the XSLT I have currently have...

<xsl:template match="Dto13/CompCap">

    <tr>

      <xsl:variable name="source-id" select="generate-id(.)"/>

      

      <!-- Get the iteration value -->

      <xsl:variable name="IterationPosition">

        <xsl:number value="position()" format="1" />

      </xsl:variable>



      <xsl:if test="$IterationPosition > 1">

        <xsl:attribute name="class">collapsed</xsl:attribute>

        <xsl:attribute name="id">src<xsl:value-of select="$source-id"/></xsl:attribute>

      </xsl:if>

      

      <td class="collection_list">        

        <!-- If IterationValue = 1, output image link -->

        <xsl:if test ="$IterationPosition = 1">

          <a>

            <xsl:attribute name="onClick">

              javascript:document.images['<xsl:value-of select="$source-id"/>'].click()

            </xsl:attribute>

            <img src="images/panel_Plus.gif" alt="expand/collapse section" class="expandable"  onclick="changepic()" border="0"/>

          </a>

        </xsl:if>

        

        <xsl:call-template name="FormatDate">

          <xsl:with-param name="DateTime" select="@Date" />

        </xsl:call-template>

      </td>

      <td class="collection_list">

        <xsl:call-template name="FormatAccountValue">

          <xsl:with-param name="FinancialItem" select="Capital/@value" />

        </xsl:call-template>

      </td>

    </tr>

  </xsl:template>

我遇到的问题之一是每个< tr>在第一次迭代之后通过< Rating>创建的元素nodeset被赋予CSS类'折叠'，但考虑到它，我需要通过为它们分配一个CSS类来一次性地折叠/展开它们。我是否有人能够提供帮助我正在把它拉出来：-s

---

Tryst

one of the problems I have in there is that each <tr> element that gets created after the 1st iteration through the <Rating> nodeset gets assigned the CSS class 'collapsed', but thinking about it, I need my JS call to collapse/expand them all in one go by assigning a CSS class to them.

Is anyone able to help me with this as I am pulling me hair out :-s

---

Tryst

推荐答案

XSLT从XML输入生成HTML或XML或纯文本。 XSLT不会发生折叠/扩展，而是在显示生成的HTML并且浏览器支持用于折叠/扩展的脚本时，它将在稍后的浏览器中发生。所以这不是一个真正的XSLT问题，你只需要定义你想用XSLT生成的HTML / CSS / Script结果。
例如，这里有一个生成带有脚本的HTML的例子来翻阅表： http://home.arcor.de/martin.honnen/xslt/test2009010701.xml。样式表是此处。脚本是这里。

所以你需要获取HTML首先是脚本（也许是CSS），然后它只是用XSLT生成HTML的任务。

XSLT generates HTML or XML or plain text from XML input. Collapsing/expanding does not happen with XSLT, instead it would happen later on in the browser, when the generated HTML is displayed and the browser supports script for the collapsing/expanding. So this is not really an XSLT problem, you simply need to define the HTML/CSS/Script result you want to generate with your XSLT.
For instance, here is an example that generates HTML with script to page through sections in a table: http://home.arcor.de/martin.honnen/xslt/test2009010701.xml . The stylesheet is here . The script is here .

So you need to get the HTML and the script (and maybe the CSS) right first, then it is simply a task of generating that HTML with XSLT.

这篇关于在XSLT中创建可折叠区域（以HTML格式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！