Question

我有一个selectOneMenu，其中有两个项目，panelGroup。当选择第1项时，我想显示panelGroup，当选择第2项时，隐藏它。

我尝试使用onchange事件，但我不知道如何显示/隐藏panelGroup。也许使用panelGroup ID？

<p:selectOneMenu id="list" value="#{myBean.list}" onchange="???" >  
    <f:selectItem itemLabel="Item 1" itemValue="Item 1" />  
    <f:selectItem itemLabel="Item 2" itemValue="Item 2" />  
</p:selectOneMenu> 

<h:panelGroup id="myPanelGroup">
    ...
</h:panelGroup>

Answer 1

change =“”将允许您访问EL Listener或javascript，它没有更新组件。你最好在selectOneMenu中添加一个ajax调用。

e.g。

<p:selectOneMenu id="list" value="#{myBean.list}">  
    <f:selectItem itemLabel="Item 1" itemValue="Item 1" />  
    <f:selectItem itemLabel="Item 2" itemValue="Item 2" />
    <p:ajax event="change" process="@this" update="myPanelGroup" />
</p:selectOneMenu> 

<h:panelGroup id="myPanelGroup" rendered="#{myBean.list == '1'">
    ...
</h:panelGroup>

（你需要渲染它才能确保它只显示你的值是否为1（而不是2等）。虽然这是AJAX解决方案，你可以通过将更改侦听器绑定到selectOneMnu列表来使用jQuery来实现' - 在更改时，运行你的javascript并显示/隐藏panelgroup div（意味着你不需要渲染等）..

示例：

$("#list").change(function(event){
   //get value here and show/hide div using javascript/css what ever you prefer
});

Answer 2

您可以使用<p:remoteCommand>标记来更新表单。并使用渲染来显示/隐藏您的面板。

请参阅下面的代码，它在我身边工作并且更容易。

  <p:remoteCommand id="remotecommand" name="updatePanel"
         update="@form"></p:remoteCommand>
<p:selectOneMenu id="list" value="#{myBean.list}" onchange="updatePanel()" >  
    <f:selectItem itemLabel="Item 1" itemValue="Item 1" />  
    <f:selectItem itemLabel="Item 2" itemValue="Item 2" />  
</p:selectOneMenu> 

<h:panelGroup id="myPanelGroup" rendered="#{myBean.list eq 'Item 1'}">
    ...
</h:panelGroup>

当该时间列表的值为Item 1时，显示该面板，否则为隐藏

Answer 3

按需渲染内容是jsf中的常见做法。您还应该重新考虑使用两个选项selectOneMenu。您必须将内容包装在panelGroup元素中，并将内部元素设置为如下所示：

<p:selectBooleanCheckbox id="cboOverview" value="#{ctrlBean.bValue}">
    <p:ajax event="change" update="outputOverviewWrapper" />
</p:inputSwitch>
<h:panelGroup id="outputOverviewWrapper">
    <h:panelGroup id="toggleOverview" rendered="#{!ctrlBean.bValue}">
...
    </h:panelGroup>
</h:panelGroup>

如果您想坚持selectOneMenu，您还应该使用valueChangeListener来正确设置渲染属性。

参考是here。

PrimeFaces - 在onChange之后渲染panelGrid

3 个答案: