Question

我有一个包含这样数据的交易表： DATETIME格式为dd / MM / yyyy。

+------+-------------------+----------------+--------+
|  ID  |  START_DATETIME   |  END_DATETIME  |  USER  |
+------+-------------------+----------------+--------+
|   1  |  01/01/2012 00:00 |01/01/2012 01:00| bob    |
+------+-------------------+----------------+--------+
|   2  |  02/01/2012 00:00 |02/01/2012 01:00| foo    |
+------+-------------------+----------------+--------+

在一天内，可能会发生多笔交易。对于最终用户，我想按照日期对交易进行分组数据表如下：

+------+---------------+------------+----------+-------+
|  ID  |  START_TIME   |  END_TIME  | DURATION | USER  |
+------+---------------+------------+----------+-------+
|  Sunday 1st of January 2012                          |
+------+---------------+------------+----------+-------+
|   1  |  00:00        |  01:00     | 01:00    |  bob  |
+------+---------------+------------+----------+-------+
|  Monday 2nd of January 2012                          |
+------+---------------+------------+----------+-------+
|   2  |  00:00        |  01:00     | 01:00    |  foo  |
+------+---------------+------------+----------+-------+

如何使用JSF 2.0中的数据表执行此操作？我是否必须创建自定义组件？

服务层提供如下交易：java.util.List<Transaction>

class Transaction {
  private int id;
  private Date start;
  private Date end;
  private User user;

  // getters and setters ...
}

修改
根据chkal的回答，这是我提出的解决方案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Group by day</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th colspan="4">The last 10 transactions</th>
            </tr>
            <tr>
                <th>ID</th>
                <th>START DATE</th>
                <th>END DATE</th>
                <th>USER</th>
            </tr>
        </thead>

        <!-- Firstly iterate other dates -->
        <ui:repeat value="#{transactionBean.distinctTransactionsDates}" var="entry">
        <tbody>
            <tr>
                <th colspan="4" align="left"><h:outputText value="#{entry}" /></th>
            </tr>

            <!-- Secondly iterate other transactions -->
            <ui:repeat var="t" value="#{transactionBean.getTransactionList(entry)}">
            <tr>
                <td><h:outputText value="#{t.id}" /></td>
                <td><h:outputText value="#{t.startDate}" /></td>
                <td><h:outputText value="#{t.endDate}" /></td>
                <td><h:outputText value="#{t.user}" /></td>
            </tr>
            </ui:repeat>
        </tbody>
        </ui:repeat>
    </table>
</body>
</html>

输出

<table border="1">
    <thead>
        <tr>
            <th colspan="4">The last 10 transactions</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>START DATE</th>
            <th>END DATE</th>
            <th>USER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="4" align="left">Sun Jan 01 00:00:00 CET 2012</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Sun Jan 01 00:00:00 CET 2012</td>
            <td>Sun Jan 01 01:00:00 CET 2012</td>
            <td>bob</td>
        </tr>
        <!-- Other rows appear here -->
    </tbody>
    <!-- Other tbodies appear here -->
</table>

注意 ui:repeat是JSF 2.0中的新功能。它是h:dataTable的替代方案结帐tutorial了解更多details。

Answer 1

我认为这里没有适合的现成组件。

您可以尝试将事务条目分为两个级别。第一级是一个列表，其中每个条目表示至少发生一次事务的日期。这些条目中的每一个都有第二个列表，其中包含实际的交易。

然后，您可以使用两个嵌套的<ui:repeat>组件呈现所需的表。但在这种情况下，您必须自己渲染所有HTML表格。

我认为这应该有效。：）

JSF - 分组数据和列跨度

1 个答案: