如何渲染从选择 p:selectonemenu 触发的 p:panel？答案

【问题标题】：How to render a p:panel, triggered from the choice of a p:selectonemenu?如何渲染从选择 p:selectonemenu 触发的 p:panel？
【发布时间】：2013-03-22 12:10:13
【问题描述】：

我正在使用 Primefaces 3.4 和 JSF 2.1，我正在尝试让 p:panel 项目出现并消失关于p:oneselectmenu 的选择。我在面板中有一个p:datatable，我希望它出现并动态填充，这就是我使用面板的原因。数据表的东西运作良好，但面板没有。我尝试将面板上的“渲染”选项与一个变量链接，该变量随着菜单的每个选择的变化而变化，但没有任何反应。我也用p:outputpanel 尝试过，但什么也没发生。因此，我尝试使用具有相同操作的按钮，但又失败了。这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">
<h:body>
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            #{msg.teaching}: #{msg.socialSecurity}
        </ui:define>
        <ui:define name="body">
            <h:form id="form">
                <p:messages id="messages" autoUpdate="true"/>                  
                <p:panel id="selectSocialSecurityPanel" rendered="true">
                    <p:panelGrid>
                        <p:row>
                            <p:column>
                                <p:selectOneMenu value="#{selectOneMenuSocialSecurityTeachingBean.choice}">
                                    <p:ajax update="socialSecurityDataTablePanel, socialSecurityDataTable, toUpdate" listener="#{dataTableSocialSecurityBean.updateTable()}"/>
                                    <f:selectItem itemLabel="#{msg.select}" itemValue=""/>
                                    <f:selectItems value="#{selectOneMenuSocialSecurityTeachingBean.socialSecurityTeachingList}"/>
                                </p:selectOneMenu>
                            </p:column>
                            <p:column>
                                <p:commandButton value="#{msg.find}" actionListener="#{dataTableSocialSecurityBean.updateTable()}" update="socialSecurityDataTablePanel, socialSecurityDataTable, toUpdate" id="button">
                                    <f:ajax render="toUpdate"/>
                                </p:commandButton>
                            </p:column>
                        </p:row>
                    </p:panelGrid>
                </p:panel>                    
                <p:outputPanel id="toUpdate" rendered="#{dataTableSocialSecurityBean.rendered}" autoUpdate="true">
                    <p:panel id="socialSecurityDataTablePanel">
                        <p:dataTable id="socialSecurityDataTable" var="unit" value="#{dataTableSocialSecurityBean.socialSecurityList}">                    
                            <p:columns value="#{dataTableSocialSecurityBean.columns}" var="column" columnIndexVar="colIndex">
                                <f:facet name="header">
                                    #{column.header}
                                </f:facet>
                                #{unit[column.property]}
                            </p:columns>
                        </p:dataTable>                       
                    </p:panel>
                </p:outputPanel>
            </h:form>
        </ui:define>
    </ui:composition>
</h:body>

还有这个：

@ManagedBean
@ViewScoped
public final class DataTableSocialSecurityBean implements Serializable {

    private String choice;
    private List<Unit> socialSecurityList;
    private boolean rendered;
    private List<ColumnModel> columns = new ArrayList<ColumnModel>();

    public boolean getRendered(){
        System.out.println("DataTableSocialSecurityBean getRendered");
        System.out.println("DataTableSocialSecurityBean getRendered="+rendered);
        return rendered;
    }

    public void updateTable() {
        rendered=true;
        socialSecurityList = new ArrayList<Unit>();
        createDynamicColumns();
        populateDataTable(socialSecurityList);

    }
}

有什么想法吗？

【问题讨论】：

标签： jsf primefaces panel selectonemenu

【解决方案1】：

要使渲染的事件按照您的意愿行事，组件应该是可见的（存在于 dom 中）。最著名的 hack 是将渲染属性应用于内部组件（不是输出面板，而是其中的面板）

<p:outputPanel id="toUpdate"  autoUpdate="true">
    <p:panel id="socialSecurityDataTablePanel" rendered="#{dataTableSocialSecurityBean.rendered}">
</p:panel>
</p:outputPanel>

这样，您的 outputPanel 每次都是可见的（存在于 DOM 中），并且可以告诉其子级根据条件呈现自己。

【讨论】：

【解决方案2】：

您的rendered 字段最初是false，因此面板不会在第一个视图中呈现。在初始 HTML 的该视图中，没有 ID 为 toUpdate 的标签，因此无法呈现。我建议你把这个 panel 放在一些 h:panelGroup 中并重新渲染这个组件：

<h:panelGroup id="myContainer" layout="block">
  <p:outputPanel id="toUpdate" rendered="#{dataTableSocialSecurityBean.rendered}" autoUpdate="true">
  </p:outputPanel>
</h:panelGroup>

你使用render="myContainer"。我还建议您对 primefaces 组件使用p:ajax 而不是f:ajax。

您可以尝试添加p:effect 组件作为p:outputPanel 的子组件的效果：

<p:effect type="explode" event="load"/>

有关事件的完整列表，请参阅 PrimeFaces 用户指南。

【讨论】：

您知道是否可以在面板出现/消失时添加效果，而不仅仅是从无到有？