twitter-bootstrap - 使用子位置在 XSLT 中创建网格

Question

我正在尝试创建一个这样指定的网格:

<Node>
  <UI>Grid</UI>
  <Rows>3</Rows>
  <Cols>3</Cols>
  <Node>stuff</Node>
  <Node>stuff</Node>
  <Node>stuff</Node>
  ...
</Node>

我想用Bootstrap，所以有

<xsl:template match ="Node[UI[contains(., 'Grid')]]">
    <div class ="container-fluid">
        <xsl:apply-templates select="Node" mode="Grid"/>
    </div>

</xsl:template>

然后:

<xsl:template match ="=Node" mode="Grid">
    <div class ="col-lg-???">
        <xsl:apply-templates />
    </div>

</xsl:template>

在最后一部分，col-lg-???应该以某种方式使用节点的位置作为网格节点内的子节点来计算所需的标签，以便正确创建网格。最终，<3,3> 网格将有 9 个节点，我想像这样自动对它们进行排序:

只需使用它们在网格节点内的位置。我知道我最终还需要考虑在容器内划船，对此我也不确定。 Cols 通常会被推断 通过 Cols = Children/Rows。

输出应该是这样的:

<div class = "container">
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
</div>

编辑:

这似乎完成了工作，如果它是一行的话:

<div class ="col-lg-{12 div count(../Node)}">
     <xsl:apply-templates />
</div>

但不确定行部分。

编辑 2:

我目前拥有的:

<xsl:template match ="//Sub/Node">
    <xsl:if test="count(./preceding-sibling::*) mod (count(../Node) div ../../Rows/text()) = 0">
        <div class ="row"></div>
    </xsl:if>
    <div class ="col-lg-{12 div count(../Node)}">
        <xsl:apply-templates />
    </div>
    <xsl:if test="count(./preceding-sibling::*) mod (count(../Node) div ../../Rows/text()) = 1">
        <div class ="rowclose"></div>
    </xsl:if>
</xsl:template>

rowclose 只是为了表示法，当我在上面的 if 语句中打开一个 div 并在第二个 if 语句中关闭它时，它似乎不喜欢它。我会尝试解决这个问题。结果:

<div class="container-fluid">
    <div class="row"></div>
        <div class="col-lg-3"></div>
        <div class="col-lg-3"></div>
    <div class="rowclose"></div>
    <div class="row"></div>
        <div class="col-lg-3"></div>
        <div class="col-lg-3"></div>
    <div class="rowclose"></div>
</div>

Answer 1

我不是 100% 清楚您要实现的目标，但我认为您正在尝试每行创建三个“节点”，将每一行包含在一个 div 元素中。

如果是这样，您应该首先选择 Node 元素，这些元素将成为每行中的第一个元素(其中 $cols 是一个变量，用于保存一行中的节点数)

<xsl:apply-templates select="Node[position() mod $cols = 1]" mode="row"/>

(这里需要“行”模式，因为你最终会得到两个匹配节点的模板)

或者如果你想限制行数应该有比你需要的更多的节点，你可以这样做(“Position()”是上下文敏感的，并且与你刚刚选择的节点相关，不一定是它们的位置在树上)

<xsl:apply-templates select="Node[position() mod $cols = 1][position() &lt;= $rows]" mode="row"/>

然后你会有一个匹配这个的模板，在“行”模式下

并选择行中的节点，执行此操作

<xsl:apply-templates select="self::*|following-sibling::Node[position() &lt; $cols]" mode="cell"/>

然后您将有第二个模板匹配单元格的 Node，您可以在其中输出带有类的 div(其中 lg 是一个变量，用于保存您的表达式以避免它反复被重新计算)

试试这个 XSLT

<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="cols" select="/*/Cols" />
   <xsl:variable name="rows" select="/*/Rows" />
   <xsl:variable name="lg" select="12 div number(/*/Cols)" />

   <xsl:template match="/*">
     <div class="container">
        <xsl:apply-templates select="Node[position() mod $cols = 1][position() &lt; $rows]" mode="row"/>
     </div>
   </xsl:template>

   <xsl:template match="Node" mode="row">
     <div class="row">
        <xsl:apply-templates select="self::*|following-sibling::Node[position() &lt;= $cols]" mode="cell"/>
     </div>
   </xsl:template>

   <xsl:template match="Node" mode="cell">
     <div class="col-lg-{$lg}">
        <xsl:apply-templates />
     </div>
   </xsl:template>
</xsl:stylesheet>