如何渲染一个p:面板，从p:选择菜单触发

我正在使用Primefaces 3.4和JSF 2.1，我试图有一个面板项目出现和消失关于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);
    }
}

任何想法?

您的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"。我还建议您使用p:ajax而不是f:ajax作为主面组件。

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

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

完整的事件列表见PrimeFaces用户指南

要使呈现的事件像您想要的那样运行，组件应该是可见的(存在于dom中)。最常见的方法是将渲染属性应用于内部组件(不是outputpanel，而是其中的panel)

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

这样，你的outputPanel每次都是可见的(存在于DOM中)，并且可以告诉它的子面板根据条件呈现它们自己。

相关内容

最新更新

热门标签：