如何隐藏h:panelGrid [英] How to hide a h:panelGrid

问题描述

我有一个带有两个<f:selectItem>的<p:selectOneRadio>，我有两个<h:panelGrid>.我想根据选择的<f:selectItem>隐藏<h:panelGrid>之一.

I have a <p:selectOneRadio> with two <f:selectItem> and I have two <h:panelGrid>. I want to hide one of the <h:panelGrid> depending of the <f:selectItem> selected.

<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 ?

In this example how can i hide pnl1 if the option 1 is selected in the radio?

如果在广播中选择了 2 选项，如何隐藏 pnl2 ?

How can i hide pnl2 if the option 2 is selected in the radio?

也请告诉我所需的Bean代码.

Please show me the Bean code needed too.

仅应显示一个 pnl

推荐答案

您可以通过ajax来实现.

You can do it through 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>.

Note that you have to use a <h:panelGroup> to wrap the <h:panelGrid> to re-render. This is because each non-rendered UIComponent (rendered="false") won't be part of the tree component stored in the view and won't be able to be updated by ajax operations. So, instead rendering each <h:panelGrid> on their own, it is better to update the wrapper UIComponent. Also, <h:panelGroup layout="block"> will use a <div> when generating the HTML.

相关信息:

• JSF中的组件绑定是什么?何时首选使用?
• <h:panelGroup>

这篇关于如何隐藏h:panelGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！