根据 <p:selectOneRadio> 的选定值切换 <p:panel>

Question

我想在用户选择特定单选按钮时切换隐藏面板。 使用最新版本的 primefaces。

例如：

<p:panel id="panel1" visible="false" widgetVar="firePanel" closable="true" toggleable="true">
 hello
</p:panel>

<p:selectOneRadio value="#{formBean.selectedOptions}" layout="pageDirection">
  <f:selectItem itemLabel="Option 1" itemValue="opt1" />
  <f:selectItem itemLabel="Option 2" itemValue="opt2" />
  <f:selectItem itemLabel="Option 3" itemValue="opt"/>                           
</p:selectOneRadio>

我想实现这样的目标，但是在单击 RadioButton3 时，不使用命令按钮

<p:commandButton id="but" value="Show" onclick="firePanel.show();"/>

这可能吗？ 谢谢！

Answer 1

采取以下步骤：

1. 在您的支持 bean 中声明一个boolean 变量来管理面板的状态并将其绑定到面板的visible 属性

   boolean panelIsVisible;
   //getter and setter
   

   <p:panel id="panel1" visible="#{formBean.panelIsVisible}" widgetVar="firePanel" closable="true" toggleable="true">
   

2. 定义一个方法来根据selectedOptions的值切换可见性布尔值

   public void changePanelState(){
   
       //set panelIsVisible to true or false based on whatever conditions you choose
   
   }
   

3. 将 <p:ajax/> 事件添加到您的 <p:selectOneRadio/> 以在该菜单上的任何选择上触发 ajax 事件

   <p:selectOneRadio value="#{formBean.selectedOptions}" layout="pageDirection">
     <f:selectItem itemLabel="Option 1" itemValue="opt1" />
     <f:selectItem itemLabel="Option 2" itemValue="opt2" />
     <f:selectItem itemLabel="Option 3" itemValue="opt"/> 
     <p:ajax listener="#{formBean.changePanelState}" update="panel1"/>                          
   </p:selectOneRadio>
   

   这是假设 panel1 与 selectOneRadio 位于同一 <h:form/> 中。