How to represent nested data in a Primefaces datatable?

后端未结

关注

 5  2082

Here is my model :

User.java

public class User {
   //...

   public List getFriends() {
      // ...
   }
}

相关标签:

5条回答

北恋

2020-12-09 13:36
Primefaces expandable rows should address your need, only you'll need to get creative with the child row component. You could use prime faces data list component as the child row component. It'll look something like:
```
   <p:row expansion>
    <p:datalist value ="#{yourTableRowVar.friendslist} Var="friend">
    #{friend.firstName}
    </p:datalist>
   </p:row expansion>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

独厮守ぢ

2020-12-09 13:47

Just use another data table inside your column :)

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

This is how it looks on my localhost

enter image description here

0 讨论(0)

天涯浪人

2020-12-09 13:47

Based on @Kerem's answer, here is the solution I came up with:

In order to make the nested datable like own rows of main datatable, I have overriden the CSS class .ui-dt-c. Check in h:head the style tag for details.

<?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>

0 讨论(0)

别那么骄傲

2020-12-09 13:54

For me there is two solution :

1- If i want to browse user by user and retrieve the list of friends, in this case i prefer the 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- In a case where i can handle directly the list of friends (listFreinds [userName, friend]) or when i'm using JPQL query :

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

The second case, is a new native solution with Primefaces Row Grouping since v6.0.11

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

0 讨论(0)

不要未来只要你来

2020-12-09 13:57

Another option is to use ui:repeat inside a column to get all the values of a collection.

Example:

<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>
...

0 讨论(0)