动态添加和删除面板PrimeFaces

Question

如何在主面中动态添加面板?

目标是有一个按钮来添加面板。通过下面代码中的closeable选项可以很容易地移除面板:

<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);
    }
}

这个方法将找到你的holder panelgrid组件的id，添加一个新的org.primefaces.component.panel.Panel，并设置几个字段，并将其添加到父组件。

commandButton的update=":myPanelGrid"属性将通知panelGrid用新数据更新自己。

Answer 2

简单地说，我将<p:panel嵌套在具有rendered属性的<h:panelGroup中:

<h:panelGroup id="myPanelGroup">
    <p:panel rendered="#{myBean.renderPanel}">
        <span>Content</span>
    </p:panel>
</h:panelGroup>
<p:commandButton action="#{myBean.showPanel()}" update="myPanelGroup"
    value="Show Panel" />
<p:commandButton action="#{myBean.hidePanel()}" update="myPanelGroup"
    value="Hide Panel" />

The Bean:

@ManagedBean
@ViewScoped
public class MyBean {
    private boolean renderPanel;
    public void showPanel() {
        this.renderPanel = true;
    }
    public void hidePanel() {
        this.renderPanel = false;
    }
    // Getter for renderPanel
}

注意:根据您的需要，最好避免在这里使用@ViewScoped，您可以在表单(例如复选框)中绑定renderPanel