如何在 JSF 数据表中添加行详细信息？答案

【问题标题】：How to add row details in JSF data table?如何在 JSF 数据表中添加行详细信息？
【发布时间】：2013-03-20 01:07:20
【问题描述】：

我需要在每个 JSF dataTable 行中添加“+”图标。单击该图标时，该行应展开以显示有关该行中对象的相关详细信息。我需要知道，JSF 中是否已经存在这种性质的东西？

我正在尝试完成这样的事情： http://www.datatables.net/examples/api/row_details.html

请告诉我，有没有人知道它。仅供参考，我目前使用的是战斧的数据表。

提前致谢。

【问题讨论】：

标签： jquery jsf datatable row

【解决方案1】：

您可以为各种组件选择 PrimeFaces，

至于您当前的需求，请查看this example

【讨论】：

感谢 Jitesh。不幸的是，我不想只为一个组件添加新库。我已经在使用 Richfaces 和 tomahawk 的组件了。
我发现 BalusC 关于类似要求的回复似乎值得一试。 stackoverflow.com/questions/2133985/…
@AmitGupta RichFaces 已经使用 <rich:collapsibleSubTable> 处理了这个问题
@LuiggiMendoza 谢谢，但它提供了完全不同的功能。我需要的是，当用户单击带有数据条目的特定行时，它会在下面显示面板，其中包含相关信息，而不必是表格。我提供了一个有问题的示例链接。
@AmitGupta 可以使用<ui:repeat> 来获得表格和<rich:collapsiblePanel>。不要认为<h:dataTable> 或<rich:dataTable> 是在JSF 中创建<table> HTML 元素的唯一方法。

【解决方案2】：

我已经使用 t:dataTable 的 varDetailToggler 完成了这项工作，因为 tomahawk 已经是项目的一部分，然后使用 detailStamp facet 指定要显示为行详细信息的组件。代码如下所示：

<t:dataTable var="node"
    border="1"
    value="#{tableDataModel}"
    varDetailToggler="detailToggler">
    <t:column >
        <h:commandLink rendered="#{detailToggler.currentDetailExpanded}" action="#{detailToggler.toggleDetail}">
            <h:graphicImage value="/images/minus.png" style="border:0" />
        </h:commandLink>
        <h:commandLink rendered="#{!detailToggler.currentDetailExpanded}" action="#{detailToggler.toggleDetail}">
            <h:graphicImage value="/images/plus.png" style="border:0" />
        </h:commandLink>
    </t:column>
    <t:column >
    ....
    </t:column>
    <t:column >
    ....
    </t:column>
    <f:facet name="detailStamp">
                <h:outputText value="Row details here...Can be any component"/>
    </f:facet>
</t:dataTable>

【讨论】：