如何创建数据表或树看起来类似于primefaces中的图片？

Question

我开发了一个Web应用程序，我想要一张类似于图片中的类似表格。

我可以使用jsf2.2和带有加号按钮的primefaces 4.0创建一个表。当我在加号按钮上添加文档时，如图所示（表中的数字4）。

或者用jsf和primefaces这是不可能的，我需要另一个框架。对于我的工作，我必须使用jsf。所以框架必须与jsf兼容。

Primefaces的<p:accordionPanel>看起来不错。我可以将其与<p:dataTable>结合使用吗？或者让<p:dataTable>有机会使用相同的doc-Number对表条目进行分组，如下图所示？

我发现这Link Data Tabel看起来不错。 树看起来也很好Link Tree

Answer 1

使用相同的Tree - Animate示例，但修改第一个expandedIcon的{​​{1}}和collapsedIcon以获取加号和减号图标：

<p:treeNode>

[UPDATE]

或者，如果您想获得数据表视图，可以使用Tree Table，并获取加号和减号图标，将其添加到您的css中：

 <p:tree id="docTree" value="#{documentsController.root}" var="doc" animate="true">  
    <p:treeNode expandedIcon="ui-icon-plus"  
                collapsedIcon="ui-icon-minus">  
        <h:outputText value="#{doc.name}"/>  
    </p:treeNode>
 ...