PrimeFaces - 在 onChange 之后渲染一个 panelGroup答案

【问题标题】：PrimesFaces - Render a panelGroup after onChangePrimeFaces - 在 onChange 之后渲染一个 panelGroup
【发布时间】：2014-05-07 07:23:16
【问题描述】：

我有一个selectOneMenu 有两个项目和一个panelGroup。选择项目1时，我想显示小组组，然后选择项目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>

【问题讨论】：

标签： events primefaces selecteditem

【解决方案1】：

change="" 将让您访问 EL 侦听器或没有更新组件的 javascript。最好在 selectOneMenu 中添加一个 ajax 调用。

例如

<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 'list 来使用 jQuery ' - 在更改时，运行您的 javascript 并显示/隐藏面板组 div（意味着您不需要渲染等）..

例子：

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

【讨论】：

您的帖子很有用！谢谢！

【解决方案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>

当list的值为Item 1时显示面板，否则隐藏

【讨论】：

【解决方案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。

【讨论】：