在表格的一行内动态生成表格

Question

我有一个带有 Java 后端的 SEAM 2、JSF 1.2 Web 应用程序。目前我有显示书籍的表格（见下文）。我需要添加的是一个可折叠的表格，用于显示本书以前版本的每一行（#{_item.relatedVersions}）。这些版本中的每一个本身都是一本书（但没有可扩展的子版本表，即嵌套表只有一层深度）。所以我想知道的是在“表A”中显示书籍列表（#{bean.items}）的最干净的方法是什么，然后foreach书在“表A”中的一行内动态生成另一个表？

...

<a:form id="bookList_results_form">
       <rich:dataTable id="bookList_dt"
                    rendered="#{bean.itemCount gt 0}"
                    var="_item"
                    width="100%"
                    value="#{bean.items}">

           <rich:column>
               <f:facet name="header">ID</f:facet>
               <h:outputText value="#{_item.bookId}"/>
           </rich:column>

           <rich:column>

            <a:commandButton image="#{plusIcon}" size="15" 
            title="Expand version info."
            action="#{bean. ???}"
            ajaxSingle="true" bypassUpdates="true" immediate="true"/>

            <f:facet name="header">Book Name</f:facet>
               <h:outputText value="#{_item.bookName}" escape="true"/>
           </rich:column>

           <rich:column>
            <f:facet name="header">Comments</f:facet>
               <h:outputText value="#{_item.comments}"/>
           </rich:column>

           <rich:column>

            <f:facet name="header">Actions</f:facet>
            <a:commandLink
                value="Edit"
                title="View or Edit metadata for this book"
                action="#{bean.edit(_item.bookId)}"/>

           </rich:column>
       </rich:dataTable>
</a:form>

...

Answer 1

您是否已经尝试使用<rich:subTable>？

编辑：我更新了答案的主要部分以显示更详细的示例：

<rich:dataTable id="bookList_dt" [...] var="_item" value="#{bean.items}" >
  <f:facet name="header">
    <rich:column>
      Header1
    </rich:column>
    <rich:column>
      Header2
    </rich:column>
  </f:facet>

  <rich:column>
    <a4j:commandLink id="toggleIcon" action="#{bean.toggleRelatedVisible(_item)}" reRender="bookList_dt">
      <h:graphicImage value="/img/plusIcon.gif" rendered="#{not bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
      <h:graphicImage value="/img/minusIcon.gif" rendered="#{bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
    </a4j:commandLink>
    <h:outputText value="#{_item.bookId}"/>
  </rich:column>
  [...]
  <rich:subTable value="#{_item.relatedVersions}"
                 var="_relatedItem" 
                 rendered="#{bean.isRelatedVisible(_item)}">
    <rich:column>
      <h:outputText value="#{_relatedItem.bookId}"/>
    </rich:column>
    [...]
  </rich:subTable>
</rich:dataTable>

在此解决方案中，我在子表的折叠/展开时重新渲染整个表。或许你能找到更有效的方法。

当然，bean 必须有一些布尔值集合，其中包含子表的状态（折叠/展开）。

Answer 2

查看

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=subTableToggleControl&skin=blueSky

<h:form>
    <rich:dataTable value="#{carsBean.inventoryVendorLists}" var="list">
        <f:facet name="header">
            <rich:columnGroup>
                <rich:column colspan="6">
                    <h:outputText value="Cars marketplace" />
                </rich:column>
                <rich:column breakRowBefore="true">
                    <h:outputText value="Model" />
                </rich:column>
                <rich:column>
                    <h:outputText value="Price" />
                </rich:column>
                <rich:column>
                    <h:outputText value="Mileage" />
                </rich:column>
                <rich:column>
                    <h:outputText value="VIN Code" />
                </rich:column>
                <rich:column>
                    <h:outputText value="Items stock" />
                </rich:column>
                <rich:column>
                    <h:outputText value="Days Live" />
                </rich:column>
            </rich:columnGroup>
        </f:facet>
        <rich:column colspan="6">
            <rich:collapsibleSubTableToggler for="sbtbl" />
            <h:outputText value="#{list.vendor}" />
        </rich:column>
        <rich:collapsibleSubTable value="#{list.vendorItems}" var="item" id="sbtbl" expandMode="client">
            <rich:column>
                <h:outputText value="#{item.model}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{item.price}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{item.mileage}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{item.vin}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{item.stock}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{item.daysLive}" />
            </rich:column>
            <f:facet name="footer">
                <h:outputText value="Total of #{list.vendor} Cars: #{list.count}" />
            </f:facet>
        </rich:collapsibleSubTable>
    </rich:dataTable>
</h:form>