如何隐藏 h:panelGrid答案

【问题标题】：How to hide a h:panelGrid如何隐藏 h:panelGrid
【发布时间】：2014-06-02 17:09:02
【问题描述】：

我有一个<p:selectOneRadio> 和两个<f:selectItem>，我有两个<h:panelGrid>。我想根据所选的<f:selectItem> 隐藏<h:panelGrid> 之一。

<p:selectOneRadio>
    <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
    <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
</p:selectOneRadio>

<h:panelGrid id="pnl1">
    //More stuff here...
</h:panelGrid>

<h:panelGrid id="pnl2">
    //More stuff here...
</h:panelGrid>

在此示例中，如果在收音机中选择了选项 1，我如何隐藏 pnl1？

如果在收音机中选择了选项2，我该如何隐藏pnl2？

请给我看所需的 Bean 代码。

只应显示一个pnl

【问题讨论】：

标签： java jsf primefaces hide

【解决方案1】：

你可以通过 ajax 来实现。

<h:form id="frmPanels">
    <p:selectOneRadio id="sorPanelShow" binding="#{sorPanelShow}">
        <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
        <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
        <p:ajax update="pnlContainer" />
    </p:selectOneRadio>

    <h:panelGroup id="pnlContainer" layout="block">
        <h:panelGrid id="pnl1" rendered="#{sorPanelShow.value eq '2'}">
            //More stuff here...
        </h:panelGrid>

        <h:panelGrid id="pnl2" rendered="#{sorPanelShow.value eq '1'}">
            //More stuff here...
        </h:panelGrid>
    </h:panelGroup>
</h:form>

请注意，您必须使用 <h:panelGroup> 包装 <h:panelGrid> 以重新渲染。这是因为每个未渲染的 UIComponent (rendered="false") 都不会成为存储在视图中的树组件的一部分，并且无法通过 ajax 操作进行更新。因此，与其单独渲染每个<h:panelGrid>，不如更新包装器UIComponent。此外，<h:panelGroup layout="block"> 在生成 HTML 时将使用 <div>。