Question

如何在网格/缩略图中显示数据库中的数据like this或类似的内容 jsFiddle。我正在使用spring / jsp技术。现在我在这样的表格中展示它。

在JSP中

<table class="pdtTable"  border="1" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <th>Product Name</th>       
    </tr>
   <c:forEach items="${productList}" var="product" >
    <tr>
        <td><a href="details${product.id}"> ${product.productName}</a></td>
        </tr>    
   </c:forEach>
    </table>

Answer 1

使用forEach循环中的varStatus属性，并使用它来检查（使用模运算符）是否需要启动或关闭行。

<table class="pdtTable"  border="1" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <th>Product Name</th>       
  </tr>
  <c:forEach items="${productList}" var="product" varStatus="status">
    <c:if test="${status.index % 3 == 0}"><tr></c:if>
    <td><a href="details${product.id}"> ${product.productName}</a></td>
    <c:if test="${status.index % 3 == 2}"></tr></c:if>
  </c:forEach>
</table>

这可能会使您的表格行未关闭，因此您需要为此构建一个检查。

更好的解决方案是使用CSS并使用float来查看项目列表，例如：

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: yellow;
}

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如何在网格/缩略图中显示数据

1 个答案: