xslt - Sharepoint 2010 xslt dataview：修改表结构以显示列表项

Question

我有一个要显示的图像列表。SharePoint 中的标准模板，每个项目将使用 xsl:for-each 循环并在表格中显示为单行，如下面的示例

 __________   
|          |  
|  image   |  
|__________|  
 __________   
|          |  
|  image   |  
|__________| 
 __________
|          |  
|  image   |  
|__________|  
 __________   
|          |  
|  image   |  
|__________|

简单的代码：

<xsl:for-each select="$Rows">
   <tr>
      <td><xsl:value-of ......./> </td>
   </tr>
</xsl:for-each>

我需要做的是在每行中显示 3 个项目，如下面的示例

 __________     __________     __________
|          |   |          |   |          |
|  image   |   |  image   |   |  image   |
|__________|   |__________|   |__________|
 __________     __________     __________
|          |   |          |   |          |
|  image   |   |  image   |   |  image   |
|__________|   |__________|   |__________|

如何使用循环在 xslt 中执行此操作。

Answer 1

我通常不建议for-each在 XSL 中使用嵌套的 es，但为了避免过多地使用 XSLT，如何：

<xsl:for-each select="$Rows[position() mod 3 = 1]">
   <tr>
      <!-- Select the (0-based) position within this iteration -->
      <xsl:variable name="i" select="position() - 1" />
      <xsl:for-each select="$Rows[(position() &gt; ($i * 3)) and
                                  (position() &lt;= (($i + 1) * 3))]">
         <td><xsl:value-of ......./> </td>
      </xsl:for-each>
   </tr>
</xsl:for-each>

Answer 2

另一种方法是使用<li>而不是表格单元格。这正确地设置了基础数据的表示。使用适当的 CSS，您可以根据 webpart(?) 的可用宽度来包装列表项。

<style>
.imagelist li { float: left; }
</style>

然后...

<ul class="imagelist">
<xsl:for-each select="$Rows">
      <li><xsl:value-of ......./> </li>
</xsl:for-each>
</ul>

当然，您可能需要在列表的 web 部件/容器中添加“宽度”样式规则 - 这取决于图像的宽度。