HTML表格行的行计数器

Question

我在JSF Web应用程序中有一个HTML表格。 我正在使用<ui:repeat>动态生成行。 我想为每一行设置一个计数器。 有什么帮助吗？

类似于rich faces dataTable中的rowKeyVar。

- crazyTechie

Answer 1

从Facelets 2.0开始，可以使用varStatus实现此操作。

<ui:repeat varStatus="status" var="user" value="#{collection}">
     #{status.index}
</ui:repeat>

- ustun

Answer 2

由于您正在使用RichFaces，因此可以使用其迭代标记（<a4j:repeat>）来实现，这比使用<c:forEach> 更为适当，并且类似于<ui:repeat>的扩展。

<table>
    <a4j:repeat value="#{bean.list}" var="item" rowKeyVar="idx">
        <tr>
            <td><h:outputText value="#{idx + 1}" /></td>
            <td><h:outputText value="#{item.someProperty}" /></td>
            <td><h:outputText value="#{item.otherProperty}" /></td>
        </tr>
    </a4j:repeat>
</table>

- Bozho

Answer 3

你无法使用ui:repeat来很好地完成这个任务，但是你可以使用h:dataTable来实现。将组件绑定到后端bean中的UIData属性。它有一个getRowIndex()方法，可以完全满足你的需求：

<h:dataTable binding="#{bean.table}" value="#{bean.list}" var="item">
    <h:column><h:outputText value="#{bean.table.rowIndex + 1}" /></h:column>
    <h:column><h:outputText value="#{item.someProperty}" /></h:column>
    <h:column><h:outputText value="#{item.otherProperty}" /></h:column>
</h:dataTable>

这里我将1添加到UIData#getRowIndex()中，因为它是从零开始的。您可能会发现使用datatables文章有助于了解更多关于datatables的内容。

如果您实际上想要更多地控制表格布局（特别是使用colspans/rowspans，在真正的JSF h:dataTable标记中缺少），那么另一种选择是使用JSTL c:forEach标记，它具有一个varStatus属性，可以让您处理循环状态。

<table>
    <c:forEach items="#{bean.list}" var="item" varStatus="loop">
        <tr>
            <td><h:outputText value="#{loop.index + 1}" /></td>
            <td><h:outputText value="#{item.someProperty}" /></td>
            <td><h:outputText value="#{item.otherProperty}" /></td>
        </tr>
    </c:forEach>
</table>

- BalusC

---

我会尝试第二种方法。c:forEach。谢谢BalusC。 - crazyTechie

c:forEach 的主要缺点是您不能轻松地在表格中使用输入组件。使用 h:dataTable，您可以轻松创建可编辑的数据表，JSF 将完全管理所有数据收集和更新。 - BalusC

Answer 4

一个不好（或好）的想法是使用JavaScript来完成这个技巧。

<script>
    var numberOfIndex = 0;
</script>
<ui:repeat value="#{modelBean.listUser}" var="item">
    <tr>
            <td><script>numberOfIndex -=-1;document.write(numberOfIndex);</script></td>
        <td>${item.id}</td>
        <td>${item.name}</td>
    </tr>
</ui:repeat>

- BachT

Answer 5

在ui:repeat中没有每行的计数器。正如BalusC所说，您可以选择使用h:datatable。另一个想法是间接地为服务器端列表中的每个对象添加一个附加索引方法，并在jsf中获取它并进行操作。

- valli