如何在 Primefaces 数据表中表示嵌套数据?

Posted

技术标签:

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

这是我的模型:

User.java

public class User 
   //...

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

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

users.jsf

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

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

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

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

如何构建这个数据表?

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

Primefaces/JSF Nested Data Table How to do a dataTable containing a subtable with Primefaces in the same row? What's doing with mine? Primefaces dataTable with rowspan ...添加你的?

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

【问题讨论】:

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

【讨论】:

以上是关于如何在 Primefaces 数据表中表示嵌套数据?的主要内容,如果未能解决你的问题,请参考以下文章

如果它们来自数据源,如何在 graphql 模式中表示枚举?

如何在数据库中表示银行账户信息?

如何在数据库中表示一个实体的许多相似属性?

如何在 SQL 数据库中表示非 SQL 自定义模式结构

如何在数据库中表示一系列动作,同时保留每个动作的详细信息?

如何在 R 中表示和合并具有*日期范围*的时间序列数据帧?