Question

我需要您的帮助，在一个位置展示和隐藏两个不同的panel组件。目前在顶部的页面中，我允许用户从selectOneRadio组件中选择一个选项。

在selectOneRadio组件下方，我将放置两个不同的panel组件，我使用呈现的属性根据选择显示或隐藏panel。例如，如果用户选择第一个选项，则将显示第一个panel，第二个选项将被隐藏，如果他选择第二个选项，则第一个panel组件将被隐藏，第二个组件将被隐藏所示。

但是，我面临的问题是，如果用户选择第二个选项，第一个面板将被隐藏，并且当我放置panelGrid个组件和inputText组件时会有很大的空间在第一个panel及其下方，将显示第二个panel。那么如何让第二个panel显示在第一个panel的位置。

这是JSF代码：

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td>
                <p:outputLabel value="Please Select a Request Type:"/>

        </td>
    </tr>

    <tr>
    <p:selectOneRadio id="request" layout="pageDirection" value="#{user.requestType}">
        <td width="50%">
    <f:selectItem itemLabel="Certificates for Other" itemValue="O"/>
         </td>
         <td width="50%">
    <f:selectItem itemLabel="Certificates for Banks" itemValue="B"/>
         </td>
     <p:ajax event="change" update="@form" listener="#{user.firstToggle}"/>
    </p:selectOneRadio>
     </tr>
</table>

<p:panel id="toggleable" header="Certificates for Other" toggleable="true" rendered="#{user.firstTogg}" widgetVar="panel" style="margin-bottom:20px">
    <table border="0" cellspacing="0" cellpadding="2">
        <tr>
            <td height="100%"> 
                <p:selectOneMenu label="c_e_language_hr" id="c_e_language_hr" disabled="#{user.firstTogg}"    value="#{user.employmentCertificateLanguageHr}">
                 <f:selectItem itemLabel="Please Select a Language" itemValue="F"/>
                 <f:selectItems value="#{user.ceLangDesc}" var="celang" itemLabel="#{celang.langDesc}" itemValue="#{celang.langCd}"/>
                </p:selectOneMenu>
            </td>
        </tr>
    </table>        
</p:panel>
<p:panel id="toggleable1" header="Certificates for Banks" toggleable="true" rendered="#{user.secondToggle}" widgetVar="panel1" style="margin-bottom:15px">

</p:panel>

Primefaces - 如何在一个位置显示和隐藏两个不同的`panel`组件

0 个答案: