【问题标题】:How can I build an alphabetical accordion with XSLT?如何使用 XSLT 构建按字母顺序排列的手风琴?
【发布时间】:2009-02-04 23:40:20
【问题描述】:

给定以下 XML:

<databases>
    <database>
        <title_display>Aardvark</title_display>
    </database>
    <database>
        <title_display>Apple</title_display>
    </database>
    <database>
        <title_display>Blue</title_display>
    </database>
    <database>
        <title_display>Car</title_display>
    </database>
</databases>

如何使用 XSLT 获得以下 HTML 输出?

<h2>A</h2>
<div class="a-content">
    <ul>
        <li>Aardvark</li>
        <li>Aardvark</li>
    </ul>
</div>

<h2>B</h2>
<div class="b-content">
    <ul>
        <li>Blue</li>
    </ul>
</div>

<h2>C</h2>
<div class="c-content">
    <ul>
        <li>Car</li>
    </ul>
</div>

我可以放心地假设所有&lt;database&gt; 元素已经按字母顺序排列。谢谢!

编辑:为了将来参考,“手风琴”部分是用 JavaScript 将 HTML 转换为手风琴元素。

【问题讨论】:

  • @Tyson,为您的问题找到更有效、更准确的解决方案 :)

标签: html xslt


【解决方案1】:

这是一个更有效的解决方案,使用经典的 Muenchian 方法进行分组 -- 使用键

这种转变

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:variable name="vLower" select=
 "'abcdefghijklmnopqrstuvwxyz'"/>

 <xsl:variable name="vUpper" select=
 "'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>

 <xsl:key name="kTitleBy1stLetter" match="database"
  use="substring(title_display,1,1)"/>

    <xsl:template match="/*">
      <xsl:for-each select=
      "database
        [generate-id()
        =
         generate-id(key('kTitleBy1stLetter',
                         substring(title_display,1,1)
                         )[1]
                    )
        ]"
      >
        <xsl:variable name="v1st" 
         select="substring(title_display,1,1)"/>
        <h2><xsl:value-of select="$v1st"/></h2>
        <div class="{translate($v1st, 
                     $vUpper,
                     $vLower)}-content">
          <ul>
            <xsl:for-each select=
              "key('kTitleBy1stLetter',$v1st)">
               <li><xsl:value-of select="title_display"/></li>
            </xsl:for-each>
          </ul>
      </div>
      </xsl:for-each>
    </xsl:template>
</xsl:stylesheet>

应用于最初提供的 XML 文档时

<databases>
    <database>
        <title_display>Aardvark</title_display>
    </database>
    <database>
        <title_display>Apple</title_display>
    </database>
    <database>
        <title_display>Blue</title_display>
    </database>
    <database>
        <title_display>Car</title_display>
    </database>
</databases>

准确地产生想要的结果

<h2>A</h2>
<div class="a-content">
   <ul>
      <li>Aardvark</li>
      <li>Apple</li>
   </ul>
</div>
<h2>B</h2>
<div class="b-content">
   <ul>
      <li>Blue</li>
   </ul>
</div>
<h2>C</h2>
<div class="c-content">
   <ul>
      <li>Car</li>
   </ul>
</div>

请注意,Muenchian 方法比使用比较 preceding-sibling:: 上的所有 database 元素的 O(N^2) 解决方案要高效得多。 轴。

此外,此解决方案生成具有所需大写字母的class 属性值

【讨论】:

    【解决方案2】:

    您可以尝试使用此方法进行分组。请注意,xslt2.0 有一个 for-each-group,这使得这更容易。

    <xsl:stylesheet 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
      version="1.0">
      <xsl:output method="html"/>
    
      <xsl:template match="/databases">
        <xsl:for-each select="database">
            <xsl:variable name="Init" select="substring(title_display,1,1)"/>
            <xsl:if test="not(preceding-sibling::*[substring(title_display,1,1)=$Init])">
                <h2><xsl:value-of select="$Init"/></h2>
                <div>
                <xsl:attribute name="class">
                    <xsl:value-of select="$Init"/><xsl:text>-content</xsl:text>
                </xsl:attribute>
                <ul>
                <xsl:for-each select="../database[substring(title_display,1,1)=$Init]">
                     <li><xsl:value-of select="title_display"/></li>
                </xsl:for-each>
                </ul>
                </div>
            </xsl:if>
        </xsl:for-each>
      </xsl:template>
    
    </xsl:stylesheet>
    

    这通过循环遍历所有数据库来工作,但只为以每个字母开头的第一个数据库发出数据。然后它会选择所有以该字母开头的项目并将它们作为一个组进行处理。

    您的另一个选择是使用 xslt 中的 Muenchian method 分组。

    【讨论】:

    • 谢谢!不知何故,我想我必须用模板做一些奇怪的递归才能让它工作。我们常常遇到简单的解决方案,对吧?
    • 这个解决方案产生:
      但需要的是:
      而且,它可能非常低效 -- O(N ^2) 如果有很多“数据库”兄弟。
    • 这就是我提到Muenchian方法的原因。有时只需要更慢但更简单的方法。
    【解决方案3】:

    这是 Josh 解决方案的不区分大小写版本:

    <xsl:variable name="lower">abcdefghijklmnopqrstuvwxyz</xsl:variable>
    <xsl:variable name="upper">ABCDEFGHIJKLMNOPQRSTUVWXYZ</xsl:variable>
    
    <xsl:for-each select="databases/database">
        <xsl:variable name="Init" select="translate(substring(title_display,1,1), $lower, $upper)"/>
        <xsl:if test="not(preceding-sibling::*[translate(substring(title_display,1,1), $lower, $upper)=$Init])">
            <h2><xsl:value-of select="$Init"/></h2>
            <div>
                <xsl:attribute name="class">
                    <xsl:value-of select="translate(substring($Init,1,1), $upper, $lower)"/><xsl:text>-content</xsl:text>
                </xsl:attribute>
                <ul>
                    <xsl:for-each select="../database[translate(substring(title_display,1,1), $lower, $upper)=$Init]">
                        <li><xsl:value-of select="title_display"/></li>
                    </xsl:for-each>
                </ul>
            </div>
        </xsl:if>
    </xsl:for-each>
    

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签