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

我通常不建议在XSL中使用嵌套的for-each 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>

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

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

2 个答案: