jsf - 如何替换primefaces中的内容

Question

我正在使用primefaces 8.0V。在我的项目中有 AccordionPanel，其中有 2 个选项卡，每个选项卡中有 3 个菜单项。我在 AccordionPanel 旁边有数据表，它显示了一些信息。现在的要求是当我点击某些添加 Pationt menuItem 时，dataTable 应该替换为表单。
我怎样才能只通过使用 primefaces 来做到这一点？
这是我的代码：

                <div class="ui-g-2 main-menu">
                    <h:form id="form">  
                        <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
                        <p:accordionPanel class="ui-g-12">
                            <p:tab title="Schedual" class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-2" closable="true">
                                <div class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12 sub-menu">
                                     <p:menu class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-2">
                                        <p:menuitem value="Save (Non-Ajax)"  ajax="false"
                                                    icon="pi pi-save"/>
                                        <p:menuitem value="Update"  icon="pi pi-refresh"/>
                                        <p:menuitem value="Delete"  icon="pi pi-times"/>
                                    </p:menu>
                                </div>
                            </p:tab>
                           <p:tab title="Pationts Operatons" class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12" closable="true">
                                <div class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12 sub-menu">
                                     <p:menu class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12">
                                         <p:menuitem value="add pationt"  oncomplete="dlg.show()" icon="pi pi-save"/>
                                         <p:menuitem value="Update pationt"   icon="pi pi-refresh"/>
                                         <p:menuitem value="Delete pationt"  icon="pi pi-times"/>
                                    </p:menu>
                                </div>
                            </p:tab>
                        </p:accordionPanel>
                    </h:form>
                </div> 
                <div class="ui-g-10 dashboard" style="height:500px">
                   <h:form>
                       <p:dataTable id="table" var="product" value="#{dtBasicView.products}">
                           <p:column colspan="2" headerText="Code">
                                <h:outputText value="#{product.code}" />
                            </p:column>
                           <p:column headerText="Code">
                                <h:outputText value="#{product.code}" />
                            </p:column>

                            <p:column headerText="Name">
                                <h:outputText value="#{product.name}" />
                            </p:column>

                            <p:column headerText="Category">
                                <h:outputText value="#{product.category}" />
                            </p:column>

                            <p:column headerText="Quantity">
                                <h:outputText value="# {product.quantity}" />
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
           ```

标签： jsfprimefaces