RichFaces迁移PrimeFaces：rich:collapsibleSubTable替换为p:subtable后仅显示首个子表的问题求助

兄弟，我之前也踩过PrimeFaces子表迁移的坑！你遇到的问题核心是RichFaces和PrimeFaces的子表设计逻辑差异：RichFaces允许在同一个主数据表下嵌套多个独立的rich:collapsibleSubTable，但PrimeFaces的p:subTable定位是分组子表——每个主数据表只能对应一套子表结构，直接放多个的话框架只会渲染第一个。

给你两个实用的解决方案，适配不同的展示需求：

方案一：用折叠面板封装多个子表（切换式展示） #

如果希望用户可以切换查看所有者和受益人信息，用p:accordionPanel把两个子表包起来，放在主表的行中：

<p:dataTable id="actorenTable" value="#{listActorsPageController.fileView}" var="file">
    <f:facet name="header">
        <p:columnGroup>
            <p:column>
                <h:outputText value="#{msg.name}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{msg.dateofbirth}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{msg.address_address}"/>
            </p:column>
        </p:columnGroup>
    </f:facet>

    <!-- 将两个子表放在折叠面板中，实现切换查看 -->
    <p:row>
        <p:column colspan="3">
            <p:accordionPanel activeIndex="-1" toggleable="true">
                <!-- 文件所有者子表 -->
                <p:tab title="#{msg.owner}">
                    <p:dataTable value="#{file.fileOwner}" var="owner" id="fileOwnerTable" style="margin:10px 0;">
                        <p:column>
                            <h:outputText value="#{owner.name}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{owner.birthDate}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{owner.addressFullDescription}"/>
                        </p:column>
                    </p:dataTable>
                </p:tab>
                <!-- 受益人子表 -->
                <p:tab title="#{msg.beneficiaries}">
                    <p:dataTable value="#{file.beneficiaries}" var="beneficiary" id="beneficiariesTable" style="margin:10px 0;">
                        <p:column>
                            <h:outputText value="#{beneficiary.name}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{beneficiary.birthDate}"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="#{beneficiary.addressFullDescription}"/>
                        </p:column>
                    </p:dataTable>
                </p:tab>
            </p:accordionPanel>
        </p:column>
    </p:row>
</p:dataTable>

方案二：用行扩展展示所有子表（展开式展示） #

如果想保留类似RichFaces那种点击展开后查看全部子表的效果，用p:rowExpansion把两个子表放在扩展区域：

<p:dataTable id="actorenTable" value="#{listActorsPageController.fileView}" var="file">
    <f:facet name="header">
        <p:columnGroup>
            <p:column>
                <h:outputText value="#{msg.name}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{msg.dateofbirth}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{msg.address_address}"/>
            </p:column>
        </p:columnGroup>
    </f:facet>

    <!-- 行展开触发按钮 -->
    <p:column style="width:32px">
        <p:rowToggler/>
    </p:column>

    <!-- 主表数据列（可根据需要添加文件自身的信息） -->
    <p:column>
        <h:outputText value="#{file.name}"/>
    </p:column>
    <p:column>
        <h:outputText value="#{file.createDate}"/>
    </p:column>
    <p:column>
        <h:outputText value="#{file.fileAddress}"/>
    </p:column>

    <!-- 行扩展区域，同时展示两个子表 -->
    <p:rowExpansion>
        <div style="padding:10px;">
            <h3>#{msg.owner}</h3>
            <p:dataTable value="#{file.fileOwner}" var="owner" id="fileOwnerTable" style="margin-bottom:20px;">
                <p:column>
                    <h:outputText value="#{owner.name}"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{owner.birthDate}"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{owner.addressFullDescription}"/>
                </p:column>
            </p:dataTable>

            <h3>#{msg.beneficiaries}</h3>
            <p:dataTable value="#{file.beneficiaries}" var="beneficiary" id="beneficiariesTable">
                <p:column>
                    <h:outputText value="#{beneficiary.name}"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{beneficiary.birthDate}"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{beneficiary.addressFullDescription}"/>
                </p:column>
            </p:dataTable>
        </div>
    </p:rowExpansion>
</p:dataTable>

简单总结下：PrimeFaces的p:subTable不是用来做“多子表嵌套”的，而是用来做数据分组的，所以不能直接像RichFaces那样堆多个。上面两个方案都能完美替代原来的功能，你可以根据页面交互需求选一个~

备注：内容来源于stack exchange，提问作者schwuleur