Как я могу создать алфавитный аккордеон с помощью XSLT?

Question

С учетом следующего 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>

Как получить следующий вывод HTML с помощью XSLT?

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

Можно смело предположить, что все элементы <database> уже в алфавитном порядке. Спасибо!

Редактировать: Для дальнейшего использования, часть "Аккордеон" состоит в том, что HTML превращается в элемент аккордеона с JavaScript.

Answer 1

Вот более эффективное решение, использующее классический метод Мюнхена для группировки - с ключами .

Это преобразование :

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

Обратите внимание, что метод Мюнхена намного эффективнее, чем решение O (N ^ 2) , которое использует сравнение всех database элементов preceding-sibling:: ось.

Кроме того, это решение создает значение атрибутов class с необходимой заглавной буквы .

Answer 2

Вы можете попробовать это для группировки. Обратите внимание, что xslt2.0 имеет группу для каждой группы, которая значительно упрощает эту задачу.

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

Answer 3

Вот вариант решения Джоша без учета регистра:

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