展开DataTableJSF中表行的折叠

我一直在尝试使用核心JSF实现表行的扩展/折叠功能，而且我还必须保留排序。在core JSF中有没有一种方法可以实现这一功能？

我不认为使用“core”JSF可以实现这一功能（我假设您的意思是只使用参考实现）

据我所知，您可以使用RichFaces完成子表

---

您也可以对IceFaces执行类似的操作-请参见（在表->可扩展表下）。但是，这两种方法都需要您添加和设置另一个库（RichFaces或IceFaces），这可能不是您想要的。

如果您坚持只使用引用实现，那么您就不能使用嵌套的

h:dataTable

和/或

h:panelGroup

和一个很好的CSS来将其对齐。然后，您可以使用JavaScript以智能方式显示/隐藏行详细信息

以下是一个基本的启动示例：

<h:dataTable value="#{bean.orders}" var="order">
    <h:column>
        <h:panelGrid columns="3">
            <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" />
            <h:outputText value="#{order.id}" />
            <h:outputText value="#{order.name}" />
        </h:panelGrid>
        <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;">
            <h:column><h:outputText value="#{detail.date}" /></h:column>
            <h:column><h:outputText value="#{detail.description}" /></h:column>
            <h:column><h:outputText value="#{detail.quantity}" /></h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

---

具有RichFaces的简单可扩展表

我们可以用RichFaces制作简单的可扩展表格 下面给出了代码

<h:form>
   <rich:dataTable value="#{wonderBean.wonders}" var="wonder">
      <rich:column colspan="3">
         <f:facet name="header">Wonder</f:facet>
     <h:outputText value="#{wonder.name}" />
     <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
        reRender="link">
     <a4j:actionparam name="val" value="#{!wonderBean.show}"
        assignTo="#{wonderBean.show}" />
     </a4j:commandLink>
      </rich:column>
      <rich:columnGroup>
         <rich:column>
        <a4j:outputPanel ajaxRendered="true">
             <rich:dataTable value="#{wonder.details}" var="detail"
            rendered="#{wonderBean.show}" style="border: 0px">
                <rich:column>
            <f:facet name="header">Location</f:facet>
            <h:outputText value="#{detail.location}" />
            </rich:column>
            <rich:column>
               <f:facet name="header">Image</f:facet>
               <h:graphicImage value="#{detail.imageUrl}" />
            </rich:column>
         </rich:dataTable>
          </a4j:outputPanel>
       </rich:column>
        </rich:columnGroup>
     </rich:dataTable>
</h:form>

惊奇
位置
形象

是否可以对列进行排序。您可以在这里找到一个示例：我是JSF新手，只是想知道是否可以实现面板网格的排序以及面板网格中的嵌套表。排序算法应该缩短panelGrid和datatable中的所有元素。是的，您可以让一个按钮在列表上执行所需的

Collections\sort（）

操作，然后重新显示。

<h:form>
   <rich:dataTable value="#{wonderBean.wonders}" var="wonder">
      <rich:column colspan="3">
         <f:facet name="header">Wonder</f:facet>
     <h:outputText value="#{wonder.name}" />
     <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
        reRender="link">
     <a4j:actionparam name="val" value="#{!wonderBean.show}"
        assignTo="#{wonderBean.show}" />
     </a4j:commandLink>
      </rich:column>
      <rich:columnGroup>
         <rich:column>
        <a4j:outputPanel ajaxRendered="true">
             <rich:dataTable value="#{wonder.details}" var="detail"
            rendered="#{wonderBean.show}" style="border: 0px">
                <rich:column>
            <f:facet name="header">Location</f:facet>
            <h:outputText value="#{detail.location}" />
            </rich:column>
            <rich:column>
               <f:facet name="header">Image</f:facet>
               <h:graphicImage value="#{detail.imageUrl}" />
            </rich:column>
         </rich:dataTable>
          </a4j:outputPanel>
       </rich:column>
        </rich:columnGroup>
     </rich:dataTable>
</h:form>