如何在 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:head
style
标签了解详情。
<?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 数据表中表示嵌套数据?的主要内容,如果未能解决你的问题,请参考以下文章