XSLT - 构建多个 (n) 相同大小的 html 表(在本例中为 3x3) [英] XSLT - build multiple (n) html tables of equal size (in this case, 3x3)

查看：52
本文介绍了XSLT - 构建多个 (n) 相同大小的 html 表(在本例中为 3x3)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

参考问题 1

参考问题 2

好的，前面的两个链接都讨论了如何在表格中构建单元格和行.我希望找到一个扩展的示例，展示如何构建多个 N 单元格的表格(在这种情况下，每个表格为 9 个单元格 - 3x3).我一直在尝试使用来自两个示例和网络上大约 500 个其他地方的逻辑，但一直无法破解.有人，也许是上述链接的贡献者，能否解释一下如何从单个数据集构建 3x3 的 N 表，而不是一个特定行的表?

我发现的更困难的限制之一是每个表都需要具有相同的大小，需要填充空行/单元格以满足 3x3 大小.如果发布的解决方案不仅解决了 3x3 的问题，而且以这样一种方式解释了理论，人们可以走开理解如何推断它来构建不同大小的表格，那将是非常棒的.

如果有帮助，我正在使用的数据集是数据视图 Web 部件的 SharePoint XML 结果.返回的结构是/dsQueryResult/Rows/Row/@values.我在查询本身中按特色"标志分组并按日期反向排序，以便数据按需要排序.第一个项目被切下用于特殊显示，其余的被切入这些多个相同大小的表格中，这些表格将用作 javascript 旋转器的分组显示.

提前致谢！

在看到 Alejandro 的回复后，我开始在我的环境(SharePoint Designer，遗憾的是)中构建它并得到以下结果.我将 pSequence 参数更改为/dsQueryResponse/Rows/*"，并且表构建效果很好.但是，当我打印出每个对象的 ID 和标题时，我得到以下信息:

<TR><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD></TR><TR><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD></TR><TR><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD><TD>35 - 关注社区</TD></TR></TABLE><表格><TR><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD></TR><TR><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD></TR><TR><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD><TD>26 - 龙舌兰日落</TD></TR></TABLE><表格><TR><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD></TR><TR><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD></TR><TR><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD><TD>17 - 油井火炬</TD></TR></TABLE>
请注意 - 从上述数据集中删除了项目 1-10，因此只有 3 个表.
编辑 2:
你说得对，亚历杭德罗，我应该包括我的代码.输入XML如下:
<dsQueryResponse><x:schema></x:schema><行><Row Title="Title 1" ID="33" ..../><Row Title="Title 2" ID="32" ..../><Row Title="Title 3" ID="31" ..../><Row Title="Title 4" ID="30" ..../><Row Title="Title 5" ID="29" ..../><Row Title="Title 6" ID="28" ..../><Row Title="Title 7" ID="27" ..../><Row Title="Title 8" ID="24" ..../><Row Title="Title 9" ID="20" ..../><Row Title="Title 10" ID="19" ..../><Row Title="Title 11" ID="17" ..../>...</行></dsQueryResponse></xml>
ID 不是连续的，项目已从数据库中删除，例如，它们就在那里，但我想确保我注意到 ID 不是连续的，因为某些对象偶尔会从列表中删除.所有数据都存储为行"节点的属性.
整个页面所需的输出(即使我只关注表格构建本身)是:
    <li>精选照片</li><li>存档照片 (26) [项目数减 1])</li>
<div id="photoPanes" class="panes"><div><p class="photoLibraryImageWrapper"><strong>[第一项的标题]</strong></p><div style="text-align: center"><img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid; border-right: 0px solid" alt="第一项的标题" src="照片来源"><br><span class="photoLibraryItemCopyright">[照片信用]</span><br><span class="photoLibraryItemCopyright">[照片提供]</span>
<div class="photoLibraryImageWrapper"><p>[照片描述]</p>
<div><div style="float: left"><a class="prev browser left"></a>
<div class="scrollable"><div class="items"><div><表格><tr><td>标题 2</td><td>标题 3</td><td>标题 4</td></tr><tr><td>标题 5</td><td>标题 6</td><td>标题 7</td></tr><tr><td>标题 8</td><td>标题 9</td><td>标题 10</td></tr>

<div><表格><tr><td>标题 11</td><td>标题 12</td><td>标题 13</td></tr><tr><td>标题 14</td><td>标题 15</td><td>标题 16</td></tr><tr><td>标题 17</td><td>标题 18</td><td>标题 19</td></tr>

<div><表格><tr><td>标题 20</td><td>标题 21</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

<div style="float: left"><a class="下一个浏览权限"></a>

我遇到的问题是，当我输入 Alejandro 的(忍者式)解决方案时，我让每个表都填充了整个集合中注定要在表中的第一项.因此，不是每个表有 9 个唯一单元格，而是每个表有 9 个具有相同值的单元格.我用/dsQueryResponse/Rows/* 替换了 Alejandro 代码中的 $pSequence / 并得到了上面的结果(来自第一次编辑)，其中一个项目正在填充每个表.

等待我的任何人都接受亚历杭德罗的解决方案 - 别担心，他会从我那里得到一些严肃的 +1 来解决这个问题，只是等到解决方案结束.:)

解决方案

更新:重构

这个样式表:

<xsl:param name="pRows" select="3"/><xsl:param name="pColumns" select="3"/><xsl:template match="/" name="tables"><xsl:param name="pSequence" select="*/*"/><xsl:variable name="vSize" select="$pRows * $pColumns"/><xsl:for-each select="$pSequence[position() mod $vSize = 1]"><xsl:variable name="vPosition" select="position()"/><表格><xsl:call-template name="rows"><xsl:with-param name="pSequence"选择="$pSequence[位置()>($vPosition - 1) * $vSize和$vPosition * $vSize + 1 >位置()]"/></xsl:call-template></xsl:for-each></xsl:模板><xsl:template name="rows"><xsl:param name="pSequence" select="/.."/><xsl:param name="pRow" select="$pRows"/><xsl:if test="$pRow"><xsl:call-template name="rows"><xsl:with-param name="pSequence" select="$pSequence"/><xsl:with-param name="pRow" select="$pRow - 1"/></xsl:call-template><tr><xsl:call-template name="columns"><xsl:with-param name="pSequence"选择="$pSequence[位置()>($pRow - 1) * $pColumns和$pRow * $pColumns + 1 >位置()]"/></xsl:call-template></tr></xsl:if></xsl:模板><xsl:模板名称=列"><xsl:param name="pSequence" select="/.."/><xsl:param name="pColumn" select="$pColumns"/><xsl:if test="$pColumn"><xsl:call-template name="columns"><xsl:with-param name="pSequence" select="$pSequence"/><xsl:with-param name="pColumn" select="$pColumn - 1"/></xsl:call-template><td><xsl:apply-templates select="$pSequence[$pColumn]"/></td></xsl:if></xsl:模板></xsl:stylesheet>

输入:

<item>1</item><item>2</item><item>3</item><item>4</item><item>5</item><item>6</item><item>7</item><item>8</item><item>9</item><item>10</item><item>11</item><item>12</item><item>13</item><item>14</item><item>15</item><item>16</item></root>

输出:

<tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
<表格><tr><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td></tr><tr><td>16</td><td></td><td></td></tr>

注意:它似乎遵循某种模式……我可能遗漏了一些东西.我会重温这个.

EDIT:这个样式表导入前者(只是为了表明没有修改)

<xsl:import href="table.xsl"/><xsl:output method="html"/><xsl:template match="/"><xsl:call-template name="tables"><xsl:with-param name="pSequence"select="xml/dsQueryResponse/Rows/Row[position()!=1]"/></xsl:call-template></xsl:模板><xsl:template match="Row"><xsl:value-of select="@Title"/></xsl:模板></xsl:stylesheet>

使用此输入:

<dsQueryResponse><x:schema xmlns:x="x"></x:schema><行><Row Title="Title 1" ID="33"/><Row Title="Title 2" ID="32"/><Row Title="Title 3" ID="31"/><Row Title="Title 4" ID="30"/><Row Title="Title 5" ID="29"/><Row Title="Title 6" ID="28"/><Row Title="Title 7" ID="27"/><Row Title="Title 8" ID="24"/><Row Title="Title 9" ID="20"/><Row Title="Title 10" ID="19"/><Row Title="Title 11" ID="17"/><Row Title="Title 12" ID="132"/><Row Title="Title 13" ID="131"/><Row Title="Title 14" ID="130"/><Row Title="Title 15" ID="129"/><Row Title="Title 16" ID="128"/><Row Title="Title 17" ID="127"/><Row Title="Title 18" ID="124"/><Row Title="Title 19" ID="120"/><Row Title="Title 20" ID="119"/><Row Title="Title 21" ID="117"/></行></dsQueryResponse></xml>

输出:

<tr><td>标题 2</td><td>标题 3</td><td>标题 4</td></tr><tr><td>标题 5</td><td>标题 6</td><td>标题 7</td></tr><tr><td>标题 8</td><td>标题 9</td><td>标题 10</td></tr>
<表格><tr><td>标题 11</td><td>标题 12</td><td>标题 13</td></tr><tr><td>标题 14</td><td>标题 15</td><td>标题 16</td></tr><tr><td>标题 17</td><td>标题 18</td><td>标题 19</td></tr><表格><tr><td>标题 20</td><td>标题 21</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>

注意:使用 xsl:apply-templates 比 xsl:value-of 更灵活.

Reference Question 1

Reference Question 2

Ok, both of the preceding links go to discussions of how to build cells and rows within tables. I was hoping to find an expanded example that showed how to build multiple TABLES of N-cells each (in this case 9 cells each - 3x3). I have been trying for a while to use the logic from the two examples and about 500 other places on the web but haven't been able to crack the nut. Can someone, perhaps the contributor to the above links, shed some light on how one would build N-tables of 3x3 from a single dataset as opposed to one table of specific rows?

One of the more difficult constraints I'm finding is that each table needs to be of equal size, empty rows/cells need to be filled in to meet the 3x3 size. It would be super awesome if the posted solution not only solved it for 3x3 but explained the theory in such a way a person could walk away understanding how to extrapolate that for building tables of different sizes.

If it helps, the dataset I'm working with is a SharePoint XML result for a Data View Web Part. The structure coming back is /dsQueryResult/Rows/Row/@values. I am grouping by a "featured" flag and reverse ordering by date in the query itself so the data is ordered as it needs to be. The first item is being sliced off for a special display and the rest are being sliced off into these multiple equal sized tables that will serve as grouped displays for an javascript rotator.

Thanks in advance!

EDIT:

After seeing Alejandro's response I went to build it out in my environment (SharePoint Designer, sadly) and got the following result. I changed the pSequence parameter to "/dsQueryResponse/Rows/*" and the table building worked a treat. However, when I printed out the ID and Title of each object I got the following:

<TABLE>
  <TR>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
  </TR>
  <TR>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
  </TR>
  <TR>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
    <TD>35 - Concern for Community</TD>
  </TR>
</TABLE>
<TABLE>
  <TR>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
  </TR>
  <TR>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
  </TR>
  <TR>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
    <TD>26 - Tequila Sunset</TD>
  </TR>
</TABLE>
<TABLE>
  <TR>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
  </TR>
  <TR>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
  </TR>
  <TR>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
    <TD>17 - Oil Well Flare</TD>
  </TR>
</TABLE>

Just a note - the items 1-10 were deleted from the aforementioned dataset hence only 3 tables.

EDIT 2:

You're right Alejandro, I should have included my code. The input XML is as follows:

<xml>
  <dsQueryResponse>
    <x:schema></x:schema>
    <Rows>
      <Row Title="Title 1" ID="33" .... />
      <Row Title="Title 2" ID="32" .... />
      <Row Title="Title 3" ID="31" .... />
      <Row Title="Title 4" ID="30" .... />
      <Row Title="Title 5" ID="29" .... />
      <Row Title="Title 6" ID="28" .... />
      <Row Title="Title 7" ID="27" .... />
      <Row Title="Title 8" ID="24" .... />
      <Row Title="Title 9" ID="20" .... />
      <Row Title="Title 10" ID="19" .... />
      <Row Title="Title 11" ID="17" .... />
      ...
    </Rows>
  </dsQueryResponse>
</xml>

The ID's are not sequential, items have been removed from the DB, they are just there for example but I wanted to ensure I noted the IDs are not sequential as some objects get deleted occasionally from the list. All data is stored as attributes of the "Row" node.

The desired output for the entire page (even though I'm just focused on the table building itself) is:

<ul id="photoTabs" class="tabs">
  <li>Featured Photo</li>
  <li>Archived Photos (26) [COUNT OF ITEMS MINUS 1])</li>
</ul>
<div id="photoPanes" class="panes">
  <div>
    <p class="photoLibraryImageWrapper">
      <strong>[TITLE OF FIRST ITEM]</strong></p>
      <div style="text-align: center">
        <img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid; border-right: 0px solid" alt="TITLE OF FIRST ITEM" src="SOURCE OF PHOTO"><br>
        <span class="photoLibraryItemCopyright">[PHOTO CREDIT]</span><br>
        <span class="photoLibraryItemCopyright">[PHOTO COURTESY OF]</span>
      </div>
      <div class="photoLibraryImageWrapper">
        <p>[PHOTO DESCRIPTION]</p>
      </div>
      <div>
        <div style="float: left">
          <a class="prev browse left"></a>
        </div>
        <div class="scrollable">
          <div class="items">
           <div>
            <table>
              <tr>
                <td>
                  Title 2
                </td>
                <td>
                  Title 3
                </td>
                <td>
                  Title 4
                </td>
              </tr>
              <tr>
                <td>
                  Title 5
                </td>
                <td>
                  Title 6
                </td>
                <td>
                  Title 7
                </td>
              </tr>
              <tr>
                <td>
                  Title 8
                </td>
                <td>
                  Title 9
                </td>
                <td>
                  Title 10
                </td>
              </tr>
        </table>
       </div>
       <div>
        <table>
            <tr>
              <td>
                Title 11
              </td>
              <td>
                Title 12
              </td>
              <td>
                Title 13
              </td>
            </tr>
            <tr>
              <td>
                Title 14
              </td>
              <td>
                Title 15
              </td>
              <td>
                Title 16
              </td>
            </tr>
            <tr>
              <td>
                Title 17
              </td>
              <td>
                Title 18
              </td>
              <td>
                Title 19
              </td>
            </tr>
        </table>
       </div>
       <div>
         <table>
            <tr>
              <td>
                Title 20
              </td>
              <td>
                Title 21
              </td>
              <td>
                &nbsp;
              </td>
            </tr>
            <tr>
              <td>
                &nbsp;
              </td>
              <td>
                &nbsp;
              </td>
              <td>
                &nbsp;
              </td>
            </tr>
            <tr>
              <td>
                &nbsp;
              </td>
              <td>
                &nbsp;
              </td>
              <td>
                &nbsp;
              </td>
            </tr>
        </table>
      </div>
      </div>
      <div style="float: left">
        <a class="next browse right"></a>
      </div>
    </div>
   </div>

The problem I'm having is, when I input Alejandro's (ninja-esque) solution I get each table being populated with the first item of the entire set destined to be in the table. So rather than 9 unique cells per table, I'm getting 9 cells of identical values per table. I replaced the $pSequence / in Alejandro's code with /dsQueryResponse/Rows/* and get the above result (from first Edit) where a single item is populating each table.

And anyone who is waiting for me accept Alejandro's solution - don't worry, he will be getting some serious +1's from me for this one, just waiting until the solution is wrapped up. :)

解决方案

Update: Refactored

This stylesheet:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:param name="pRows" select="3"/>
    <xsl:param name="pColumns" select="3"/>
    <xsl:template match="/" name="tables">
        <xsl:param name="pSequence" select="*/*"/>
        <xsl:variable name="vSize" select="$pRows * $pColumns"/>
        <xsl:for-each select="$pSequence[position() mod $vSize = 1]">
            <xsl:variable name="vPosition" select="position()"/>
            <table>
                <xsl:call-template name="rows">
                    <xsl:with-param name="pSequence"
                         select="$pSequence[
                                    position() > ($vPosition - 1) * $vSize
                                     and
                                    $vPosition * $vSize + 1 > position()
                                 ]"/>
                </xsl:call-template>
            </table>
        </xsl:for-each>
    </xsl:template>
    <xsl:template name="rows">
        <xsl:param name="pSequence" select="/.."/>
        <xsl:param name="pRow" select="$pRows"/>
        <xsl:if test="$pRow">
            <xsl:call-template name="rows">
                <xsl:with-param name="pSequence" select="$pSequence"/>
                <xsl:with-param name="pRow" select="$pRow - 1"/>
            </xsl:call-template>
            <tr>
                <xsl:call-template name="columns">
                    <xsl:with-param name="pSequence"
                         select="$pSequence[
                                    position() > ($pRow - 1) * $pColumns
                                     and
                                    $pRow * $pColumns + 1 > position()
                                 ]"/>
                </xsl:call-template>
            </tr>
        </xsl:if>
    </xsl:template>
    <xsl:template name="columns">
        <xsl:param name="pSequence" select="/.."/>
        <xsl:param name="pColumn" select="$pColumns"/>
        <xsl:if test="$pColumn">
            <xsl:call-template name="columns">
                <xsl:with-param name="pSequence" select="$pSequence"/>
                <xsl:with-param name="pColumn" select="$pColumn - 1"/>
            </xsl:call-template>
            <td>
                <xsl:apply-templates select="$pSequence[$pColumn]"/>
            </td>
        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

Input:

<root>
    <item>1</item>
    <item>2</item>
    <item>3</item>
    <item>4</item>
    <item>5</item>
    <item>6</item>
    <item>7</item>
    <item>8</item>
    <item>9</item>
    <item>10</item>
    <item>11</item>
    <item>12</item>
    <item>13</item>
    <item>14</item>
    <item>15</item>
    <item>16</item>
</root>

Output:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
<table>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
    <tr>
        <td>16</td>
        <td></td>
        <td></td>
    </tr>
</table>

Note: It looks like is following a pattern... I might be missing something. I'll revisite this.

EDIT: This stylesheet importing the former (just to show that there are no modifications)

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:import href="table.xsl"/>
    <xsl:output method="html"/>
    <xsl:template match="/">
        <xsl:call-template name="tables">
            <xsl:with-param name="pSequence"
                 select="xml/dsQueryResponse/Rows/Row[position()!=1]"/>
        </xsl:call-template>
    </xsl:template>
    <xsl:template match="Row">
        <xsl:value-of select="@Title"/>
    </xsl:template>
</xsl:stylesheet>

With this input:

<xml>
    <dsQueryResponse>
        <x:schema xmlns:x="x"></x:schema>
        <Rows>
            <Row Title="Title 1" ID="33"/>
            <Row Title="Title 2" ID="32"/>
            <Row Title="Title 3" ID="31"/>
            <Row Title="Title 4" ID="30"/>
            <Row Title="Title 5" ID="29"/>
            <Row Title="Title 6" ID="28"/>
            <Row Title="Title 7" ID="27"/>
            <Row Title="Title 8" ID="24"/>
            <Row Title="Title 9" ID="20"/>
            <Row Title="Title 10" ID="19"/>
            <Row Title="Title 11" ID="17"/>
            <Row Title="Title 12" ID="132"/>
            <Row Title="Title 13" ID="131"/>
            <Row Title="Title 14" ID="130"/>
            <Row Title="Title 15" ID="129"/>
            <Row Title="Title 16" ID="128"/>
            <Row Title="Title 17" ID="127"/>
            <Row Title="Title 18" ID="124"/>
            <Row Title="Title 19" ID="120"/>
            <Row Title="Title 20" ID="119"/>
            <Row Title="Title 21" ID="117"/>
        </Rows>
    </dsQueryResponse>
</xml>

Output:

<table>
   <tr>
      <td>Title 2</td>
      <td>Title 3</td>
      <td>Title 4</td>
   </tr>
   <tr>
      <td>Title 5</td>
      <td>Title 6</td>
      <td>Title 7</td>
   </tr>
   <tr>
      <td>Title 8</td>
      <td>Title 9</td>
      <td>Title 10</td>
   </tr>
</table>
<table>
   <tr>
      <td>Title 11</td>
      <td>Title 12</td>
      <td>Title 13</td>
   </tr>
   <tr>
      <td>Title 14</td>
      <td>Title 15</td>
      <td>Title 16</td>
   </tr>
   <tr>
      <td>Title 17</td>
      <td>Title 18</td>
      <td>Title 19</td>
   </tr>
</table>
<table>
   <tr>
      <td>Title 20</td>
      <td>Title 21</td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

Note: Using xsl:apply-templates is more flexible than xsl:value-of.

这篇关于XSLT - 构建多个 (n) 相同大小的 html 表(在本例中为 3x3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆