html表格行的行计数器

Posted 2023-02-22

【中文标题】html表格行的行计数器

【英文标题】：row counter for html table row

【发布时间】：2010-12-31 01:38:00

【问题描述】：

我在 JSF Web 应用程序中有 html 表格。我正在使用<ui:repeat> 动态生成行。我想要每一行都有一个计数器。我怎样才能得到这个？有什么帮助吗？

类似于rich faces dataTable中的rowKeyVar。

【参考方案1】：

从 Facelets 2.0 开始，现在可以使用 varStatus。

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

【参考方案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>

【参考方案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()，因为它是从零开始的。您可能会发现 Using datatables 文章有助于了解有关数据表的更多信息。

如果您确实想要对表格布局进行更多控制（尤其是使用真正的 JSF h:dataTable 标记中缺少的 colspans/rowspans），那么另一种方法是使用具有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>

【讨论】：

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

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

【参考方案4】：

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

【参考方案5】：

使用 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>