2

我正在使用 Primefaces 3.4 和 JSF 2.1，并且我试图让 ap: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);

    }
}

有任何想法吗？

4

2 回答 2

7

您的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用于 primefaces 组件。

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

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

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

于 2013-04-01T12:07:56.397 回答
2

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

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

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

于 2013-04-01T12:07:36.680 回答