丰富：数据表行跨度问题

Question

我需要创建一个 Rich:dataTable（甚至是扩展的）具有以下功能：

我有一个 Company 类，其中包含 Product 对象的集合。我想显示下表：

我仍然没有弄清楚如何使用子表来做到这一点（在所有示例中，我发现子表与主表具有完全相同的列）。据推测，我需要在前两列中使用行跨度，但我仍然没有找到方法。

有人可以为此提供伪代码吗？

干杯！

更新 1： 我尝试将左侧列的 rowspan 设置为列表或产品的大小，然后：

• 如果产品是空的（公司还没有产品），我打印两列。我通过将它们的 rendered 属性设置为 #{myFuncs:sizeOf(company.products)} 有条件地做到这一点
• 如果产品 >= 1，则使用 对其进行迭代，并在该循环内插入两列（一列用于产品名称，一列用于描述），并且对于每个产品名称列，除了第一个我将 breakBefore 属性设置为 #{ !myFunc:firstProduct(company.products, product)}，它对除第一个以外的所有产品名称的计算结果为 true。

不幸的是，这对我不起作用，因为 a4j:repeat 内的列根本没有出现 - 不是因为 rendered 标记。循环是正确的，因为如果我打印其他标准文本，它就会出现。

有没有办法实现行跨度，还是我把头撞到墙上了？

更新 2： 问题大概和这个article有关，说明等迭代组件和标签的区别。第一个发生在渲染时，而第二个操作更早，当 JSF 组件被放置到页面的组件树上时。

我尝试在 a4j:repeat 之外获取 rich:columns 并且它们被渲染（当然，不像预期的那样，但确实如此）。

Answer 1

很遗憾，JSF UIData 组件中不支持行跨度。您能做的最好的事情就是在 same 行中显示产品集合。您可以使用另一个UIData 组件来迭代它，例如h:dataTable（渲染<table>）、t:dataList（渲染<ul>）或a4j:repeat（不渲染任何内容，您需要在每个之后使用例如<br/>项目）。

基于基本JSF组件的半伪：

<h:dataTable value="#{bean.companies}" var="company">
    <h:column>
        <h:outputText value="#{company.name}" />
    </h:column>
    <h:column>
        <h:outputText value="#{company.email}" />
    </h:column>
    <h:column>
        <h:dataTable value="#{company.products}" var="product">
            <h:column>
                <h:outputText value="#{product.name}" />
            </h:column>
        </h:dataTable>
    </h:column>
    <h:column>
        <h:dataTable value="#{company.products}" var="product">
            <h:column>
                <h:outputText value="#{product.description}" />
            </h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

以聪明的方式使用 CSS，让它看起来像行跨度。

Answer 2

好的，基于上次更新，创建了使用 c:forEach 进行迭代的页面（同时构建组件树）。我提供的解决方案有效，但感觉有些不对劲，因为：

• 花费了太多时间（对于大约 20 家公司和 200 种产品，大约 3 秒 100% CPU）。我怀疑这是因为 for c:forEach 循环本质上构建了一个必须渲染的巨大组件树，而不是组件树小得多的初始方法。
• 我认为我必须针对数据的每次更改重新构建整个组件树，而不是仅仅重新渲染它。

无论如何，代码。我所做的是这样的（没有测试过下面的，但你会得到图片。请注意，rich:dataTable 中的迭代基本上被忽略了）：

<rich:dataTable width="70%" id="applicantsTable" rows="100"
rowClasses="applicant_row" columnClasses="col"
value="#{backingBean.companyList}" var="company">
<f:facet name="header">
        <rich:column>
            <h:outputText styleClass="headerText" value="Company Name" />
        </rich:column>
        <rich:column>
            <h:outputText styleClass="headerText" value="Company Email" />
        </rich:column>
        <rich:column>
            <h:outputText styleClass="headerText" value="Product Name" />
        </rich:column>
        <rich:column>
            <h:outputText styleClass="headerText" value="Product Email" />
        </rich:column>

</f:facet>

<c:forEach items="#{backingBean.companyList}" var="c_company">

    <c:if test="#{prs:collectionSize(c_company.products)> 0}">

        <rich:column breakBefore="true"
            rowspan="#{prs:collectionSize(c_company.products)}">
            <h:outputText value="#{c_company.name}" />
        </rich:column>

        <rich:column
            rowspan="#{prs:collectionSize(c_company.products)}">
            <h:outputText value="#{c_company.email}" />
        </rich:column>

        <c:forEach items="#{c_company.products}" var="c_product">
            <!-- This if clause is just to determine the breakBefore attribute -->
            <c:if test="#{c_company.products[0] == c_product}">
                <rich:column>
                    <h:outputText value="#{c_product.name}" />
                </rich:column>
            </c:if>

            <c:if test="#{c_company.products[0] != c_product}">
                <rich:column breakBefore="true" styleClass="internal_cell">
                    <h:outputText value="#{c_product.name}" />
                </rich:column>
            </c:if>

            <rich:column styleClass="internal_cell">
                <h:outputText value="#{c_product.email}" />
            </rich:column>

        </c:forEach>

    </c:if>

</c:forEach>

Answer 3

您可以在没有那些复杂的 forEach 的情况下做到这一点。您只需要利用 subTable 和 rowKeyVar。

例如：

<rich:dataTable
    value="#{backingBean.companyList}"
    rows="100"
    var="company">
    <f:facet name="header">
        <rich:columnGroup>
            <rich:column>Company Name</rich:column>
            <rich:column>Company Email</rich:column>
            <rich:column>Product Name</rich:column>
            <rich:column>Product Email</rich:column>
        </rich:columnGroup>
    </f:facet>
    <rich:subTable value="#{company.products}" var="product" rowKeyVar="rowKey">
        <rich:column rowspan="#{company.products.size()}" rendered="#{rowKey eq 0}">
            #{company.name}
        </rich:column>
        <rich:column rowspan="#{company.products.size()}" rendered="#{rowKey eq 0}">
            #{company.email}
        </rich:column>
        <rich:column>
            #{product.name}
        </rich:column>
        <rich:column>
            #{product.email}
        </rich:column>
    </rich:subTable>
</rich:dataTable>

对我来说完美呈现。请注意，我正在使用具有 Jboss Extended EL 的 Seam，它允许我在集合上调用 size()。如果你不使用它，你可以使用 prs:collectionSize() 或 fn:length() 作为替代。

这也适用于 Richfaces 数据滚动条。

希望这会有所帮助。

D.