如何在 h:dataTable 中实现行编号
Posted
技术标签:
【中文标题】如何在 h:dataTable 中实现行编号【英文标题】：How to implement row numbering into h:dataTable 【发布时间】：2012-05-05 05:50:29 【问题描述】：我有这个带有分页的 JSF 表。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form id="form">
<!-- The sortable data table -->
<h:dataTable id="dataTable" value="#SessionsController.dataList" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#SessionsController.selectedIds[dataItem.id]" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Account Session ID" actionListener="#SessionsController.sort">
<f:attribute name="sortField" value="Account Session ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#item.aSessionID" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="User ID" actionListener="#SessionsController.sort">
<f:attribute name="sortField" value="User ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#item.userID" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity Start Time" actionListener="#SessionsController.sort">
<f:attribute name="sortField" value="Activity Start Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#item.activityStart" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity End Time" actionListener="#SessionsController.sort">
<f:attribute name="sortField" value="Activity End Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#item.activityEnd" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity" actionListener="#SessionsController.sort">
<f:attribute name="sortField" value="Activity" />
</h:commandLink>
</f:facet>
<h:outputText value="#item.activity" />
</h:column>
</h:dataTable>
<f:verbatim><br/><hr /><br/></f:verbatim>
<table>
<tr>
<td>№</td>
<td>Select</td>
<td>Account Session ID</td>
<td>User ID</td>
<td>Activity Start Time</td>
<td>Activity End Time</td>
<td>Activity</td>
</tr>
<ui:repeat value="#SessionsController.dataList" var="i" varStatus="status">
<tr>
<td>#status.index + 1 + i.firstRow</td>
<td><h:selectBooleanCheckbox value="#i.selected" /></td>
<td><h:outputText value="#i.aSessionID" /></td>
<td><h:outputText value="#i.userID" /></td>
<td><h:outputText value="#i.activityStart" /></td>
<td><h:outputText value="#i.activityEnd" /></td>
<td><h:outputText value="#i.activity" /></td>
</tr>
</ui:repeat>
</table>
<!-- The paging buttons -->
<h:commandButton value="first" action="#SessionsController.pageFirst"
disabled="#SessionsController.firstRow == 0" />
<h:commandButton value="prev" action="#SessionsController.pagePrevious"
disabled="#SessionsController.firstRow == 0" />
<h:commandButton value="next" action="#SessionsController.pageNext"
disabled="#SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows" />
<h:commandButton value="last" action="#SessionsController.pageLast"
disabled="#SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows" />
<h:outputText value="Page #SessionsController.currentPage / #SessionsController.totalPages" />
<br />
<!-- The paging links -->
<ui:repeat value="#SessionsController.pages" var="page">
<h:commandLink value="#page" actionListener="#SessionsController.page"
rendered="#page != SessionsController.currentPage" />
<h:outputText value="#page" escape="false"
rendered="#page == SessionsController.currentPage" />
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#SessionsController.rowsPerPage" size="3" maxlength="3" />
<h:commandButton value="Set" action="#SessionsController.pageFirst" />
<h:message for="rowsPerPage" errorStyle="color: red;" />
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
<script type="text/javascript">
$("tr").not(':first').hover(
function ()
$(this).css("background","#707070");
,
function ()
$(this).css("background","");
);
function highlight(param)
var row = jQuery(param).parent().parent().children();
row.toggleClass('highlited');
</script>
</h:body>
</html>
我创建了简单的行数示例，只是为了用非常简单的 html 表来表示行数。在第二个表中分页有效，但我不知道如何将ui:repeat 实现到h:dataTable 中以实现行计数。我该如何实现？
【问题讨论】：
【参考方案1】：使用UIData#getRowIndex()。
<h:dataTable binding="#table" ...>
<h:column>
#table.rowIndex + SessionsController.firstRow + 1
</h:column>
...
</h:dataTable>
【讨论】：
是的，但我有一个自定义分页。如果我从分页打开第二页会发生什么？我又要从 1 开始了吗？ 然后将页面的firstRow添加到其中。
我明白你的意思。我以这种方式编辑了代码：pastebin.com/3Dxbref4 现在它的工作更加简单。谢谢！【参考方案2】：
我不确定我是否理解正确。您只想对行进行编号？
但是，我认为这并不像您想象的那么容易。 h:dataTable 实际上不支持这个。混合 h:dataTable 和 ui:repeat 似乎是完全错误的方法（如果我理解正确的话）。
你可以：
使用 t:dataTable（来自 Tomahawk：http://myfaces.apache.org/tomahawk/index.html）。在那里您可以使用 rowIndexVar 属性，如下所示：
<t:dataTable rowIndexVar="row" value="#someBean.value">
<h:column>
<h:outputText value="#row + 1"/>
</h:column>
</t:dataTable>
或者，更改您的数据模型并在其中提供索引。或者使用包装类：
public class DataWrapper
private int index;
private Object model;
// getter and setter
...
然后将 DataWrapper 列表传递给 JSF，而不是直接传递给您的模型。当然，您需要先在服务层中的某处设置索引。
我希望这会有所帮助。如果您需要进一步的帮助，请告诉我。
【讨论】：
<t:dataTable> 是不必要的。 DataWrapper 不是 DRY，已经存在 javax.faces.model.DataModel，它还有一个 getRowIndex()。它已被UIData 组件秘密使用。
我会这样问你：我有这个变量“firstRow”，我从分页中得到它。每次这个变量都包含第一行的编号。所以我只需要在一行中执行此操作： 以上是关于如何在 h:dataTable 中实现行编号的主要内容，如果未能解决你的问题，请参考以下文章
如何在 h:dataTable 中使用 h:selectOneRadio 来选择单行？
我应该如何在 SQL Server 2005 中实现“自动编号”字段？
如何正确使用带有 h:dataTable 的 ResultSet
如何在 <h:dataTable> 或 <ui:repeat> 中使用 <h:selectBooleanCheckbox> 来选择多个项目？
如何在没有 JSF 标记库（h:datatable 或 ui:repeat）的情况下编写 <table> 标记，但仍使用 JSF 来控制页面流