具有行跨度的 Primefaces 数据表
Posted
技术标签:
【中文标题】具有行跨度的 Primefaces 数据表【英文标题】：Primefaces dataTable with rowspan 【发布时间】：2012-10-19 19:43:27 【问题描述】：我对 JSF primefaces 3.1 还是很陌生。 我尝试构建一个“复杂”表，但我找不到使用 dataTable 的好的解决方案（我需要一个排序组件）。
我想使用这样的基本 POJO 构建一个等效于以下 html 表示的表格：
String field1
String field2
List<String> fields3 // 3 items
String field4
<table border="1">
<tr>
<td rowspan="3">col1</td>
<td rowspan="3">col2</td>
<td>col3.1</td>
<td rowspan="3">col4</td>
</tr>
<tr>
<td>col3.2</td>
</tr>
<tr>
<td>col3.3</td>
</tr>
</table>
我提供的信息可能太少，所以如果您需要，请告诉我:) 我希望我的问题很清楚。
谢谢
【问题讨论】：
行跨度真的有必要吗？你不能在嵌套表/列表中渲染fields3 吗？
是的，它可能是一个嵌套表/列表。我试过子表，但我不能在单元格中使用它：s
只需在fields3 属性上使用<ui:repeat>。
【参考方案1】：
自定义网格的可靠且灵活的解决方案是将
<html ... xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<p:panelGrid>
<p:row>
<p:column styleClass="ui-state-default" colspan="2"><!-- header -->
<h:outputText value="Some Header"/>
</p:column>
...
</p:row>
<p:row><!-- other header row -->
...
</p:row>
<c:forEach items="#list" var="element">
<p:row>
<p:column styleClass="ui-state-default" rowspan="#list.sublist.someSizeExpression"><!-- left rowspan -->
<h:outputText value="#element.name"/>
</p:column>
<c:forEach items="#element.sublist" var="subelement">
<p:column>
<h:selectBooleanCheckbox/>
</p:column>
</c:forEach>
</p:row>
</c:forEach>
</p:panelGrid>
</html>
看起来不错，Command-Buttons 和 AJAX 在 Head 和 Cells 中都可以使用。
【讨论】：
【参考方案2】：因为您在标签中提到了primefaces。
我推荐你使用p:panelGrid
<p:panelGrid>
<p:row>
<p:column rowspan="3"/>
<p:column rowspan="3"/>
<p:column rowspan="1"/>
<p:column rowspan="3"/>
</p:row>
<p:row>
<p:column/>
</p:row>
<p:row>
<p:column/>
</p:row>
</p:panelGrid>
【讨论】：
是的，但是我需要对一些列进行排序，所以 dataTable 似乎是一个不错的选择。【参考方案3】：我遇到了同样的问题：primefaces（或richfaces）只为页眉和页脚提供行跨度。
然后我尝试使用 icefaces ace:datatable 组件，它通过在列中添加一个您想要“行可扩展”的属性来运行：ace:column：groupBy="#bean.field"。
你像往常一样给出一个行列表，这个组件会在生成的 html 表中自动生成所有行跨度（我认为是通过自动检测等于值的邻域）。
它与 primefaces 组件一起运行：此时我在 icefaces 数据表单元格中有 primefaces 输出标签，而这个 icefaces 数据表位于 primefaces 面板内。
【讨论】：
我终于实现了自己的表：s @Jean-FrançoisHouzard 对于像我这样具有此功能的人，您能否将您的解决方案发布为答案？ RichFaces 确实支持行跨度！我们在一些带有子表的地方使用它。只要确保你使用了 render="#rowKey eq 0" rowspan="#bean.listSize"。你甚至可以有例如第一列的行跨度为 10，第二列的行跨度为 4 和 6（只是示例）。不过，您将需要第二列的另一个索引来进行渲染。【参考方案4】：我会看看 RichFaces 数据表。对于复杂的布局，我发现它比 PrimeFaces 表更灵活。
你可以使用
<rich:collapsibleSubTable
value="#bean.getData()"
var="line"
id="subTable"
rowKeyVar="rowKey"
>
<rich:column rendered="#rowKey eq 0" rowspan="#line.firstColRowSpan">
#line.country
</rich:column>
<rich:column rendered="#line.index eq 0" rowspan="#line.secondColRowSpan">
#line.state
</rich:column>
<rich:column>
#line.city
</rich:column>
</rich:subtable>
所以如果你的线数据看起来像这样：
US CA San Francisco 0 (index) 6 (firstColRowSpan) 3 (secondColRowSpan)
US CA LA 1 6 3
US CA Jose 2 6 3
US TX Huston 0 6 2
US TX Dallas 1 6 2
US AZ Phoenix 0 6 1
UK Surrey Guildford 0 1 1
表格会显示
US CA San Francisco
LA
Jose
TX Huston
Dallas
AZ Phoenix
UK Surrey Guildford
重要的是，如果您在其中一个行跨列中有按钮/链接等，那么您也要在其中添加一个 render="#rowKey eq 0"！
【讨论】：
以上是关于具有行跨度的 Primefaces 数据表的主要内容，如果未能解决你的问题，请参考以下文章