如何在 Primefaces 数据表中表示嵌套数据？答案

【问题标题】：How to represent nested data in a Primefaces datatable?如何在 Primefaces 数据表中表示嵌套数据？
【发布时间】：2012-11-18 22:20:56
【问题描述】：

这是我的模型：

User.java

public class User {
   //...

   public List<User> getFriends() {
      // ...
   }
}

我想建立一个这样的用户朋友表：

users.jsf

+------------+------------+ |用户 |朋友 | +------------+------------+ | |爱丽丝 | | +------------+ |亚当 |鲍勃 | | +------------+ | |皮特 | +------------+------------+ | | | ……

由于用户较多，无法一次性转储用户表。

数据表组件在这种情况下是理想的，因为它具有内置的分页支持。它也很理想，因为它可以对列进行排序......

很遗憾，我无法通过 Primefaces 示例找到更改用户列中的行跨度的方法。

如何构建这个数据表？

其他一些 OP 也有类似的问题：

编辑
这里是the final solution I came up with。

【问题讨论】：

标签： java jsf jsf-2 datatable primefaces

【解决方案1】：

只需在列中使用另一个数据表即可：)

<h:column>
    <h:dataTable var="friend" value="#{user.friends}">
        <h:column>
            <h:outputText value="#{friend.name}"/>
        </h:column>
    </h:dataTable>
</h:column>

这是它在我的本地主机上的样子

【讨论】：

【解决方案2】：

另一种选择是在列内使用ui:repeat 来获取集合的所有值。

例子：

<p:dataTable var="user" value="#{userGroupBacking.users}" id="userTable">

    <p:column headerText="User">
        <h:outputText value="#{user.name}" />
    </p:column>

    <p:column headerText="Groups">
        <ui:repeat var="group" value="#{user.groups}">
            <h:outputText value="#{group.name}" /><br />
        </ui:repeat>
...

【讨论】：

【解决方案3】：

Primefaces expandable rows 应该可以满足您的需求，只是您需要使用子行组件来发挥创意。您可以使用素面data list component 作为子行组件。它看起来像：

   <p:row expansion>
    <p:datalist value ="#{yourTableRowVar.friendslist} Var="friend">
    #{friend.firstName}
    </p:datalist>
   </p:row expansion>

【讨论】：

【解决方案4】：

根据@Kerem 的回答，这是我想出的解决方案：

为了使嵌套数据像自己的主数据表行一样，我重写了 CSS 类.ui-dt-c。查看h:headstyle标签了解详情。

<?xml version="1.0" encoding="UTF-8"?>
<html
    xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>USERS and their friends</title>
    <style>
       .ui-dt-c {
          padding: 0px !important;
       }
    </style>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable
    value="#{users.list}"
    var="u">

    <p:columnGroup type="header">
        <p:row>
            <p:column headerText="USER" />
            <p:column headerText="FRIENDS" />
        </p:row>
    </p:columnGroup>

    <p:column>#{u.name}</p:column>
    <p:column>
        <p:dataTable
            value="#{u.friends}"
            var="f">
            <p:column>#{f.name}</p:column>
        </p:dataTable>
    </p:column>
</p:dataTable>
</h:form>

【讨论】：

【解决方案5】：

对我来说有两个解决方案：

1- 如果我想逐个浏览用户并检索朋友列表，在这种情况下，我更喜欢 dataList。

<p:dataTable value="#{users.list}" var="u">

    <p:column headerText="USER">#{u.name}</p:column>    
    <p:column headerText="FRIENDS">
        <p:dataList value="#{u.friends}" var="f">
            #{f.name}
        </p:dataTable>
    </p:column>

</p:dataTable>

2- 在我可以直接处理朋友列表（listFreinds [userName,friend]）或使用JPQL查询的情况下： p>

<p:dataTable value="#{users.listFreinds}" var="u" sortBy="#{u.userName}">

    <p:column headerText="USER" groupRow="true">#{u.userName}</p:column>    
    <p:column headerText="FRIENDS">#{u.friend}</p:column>

</p:dataTable>

第二种情况，是自 v6.0.11 起采用 Primefaces Row Grouping 的新原生解决方案

https://www.primefaces.org/showcase/ui/data/datatable/rowGroup.xhtml

【讨论】：