动态添加和删除面板PrimeFaces

Question

你会如何在primefaces中动态添加面板？

目标是有一个按钮来添加面板.使用以下代码中的可关闭选项可以轻松删除面板:

<p:panel id="panel1" header="Panel 1" style="width : 150px;" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="500"> Move and Resize ME!</p:panel>

Answer 1

假设你有一个panelgrid来保存面板,那么就会有一个简单的jsf片段

<p:panelGrid id="myPanelGrid" columns="1">
</p:panelGrid>

<h:form>
    <p:commandButton value="Add Panel" actionListener="#{bean.addPanel}" update=":myPanelGrid" />
</h:form>

在您的支持bean中,动态添加面板需要一个addPanel方法

public void addPanel(ActionEvent event) {
    UIComponent component = FacesContext.getCurrentInstance().getViewRoot().findComponent("myPanelGrid");
    if (component != null) {
        Panel p = new Panel();
        p.setClosable(true);
        p.setHeader("Test");
        p.setVisible(true);
        component.getChildren().add(p);
    }
}

此方法将通过其id找到您的holder panelgrid组件,添加一个新的org.primefaces.component.panel.Panel并设置几个字段并将其添加到父组件.

commandButton的update =":myPanelGrid"属性将通知panelGrid使用新数据更新自身.