具有行跨度的 Primefaces 数据表答案

【问题标题】：Primefaces dataTable with rowspan具有行跨度的 Primefaces 数据表
【发布时间】：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>。

标签： html jsf primefaces

【解决方案1】：

自定义网格的可靠且灵活的解决方案是将与 Primefaces 一起使用：

<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"
     width="100%">
<rich:column width="40" 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}"！

【讨论】：