动态添加和删除面板 PrimeFaces答案

【问题标题】：dynamically add and remove panels PrimeFaces动态添加和删除面板 PrimeFaces
【发布时间】：2013-04-04 18:41:02
【问题描述】：

您将如何在 primefaces 中动态添加面板？

目标是有一个按钮来添加面板。使用以下代码中的 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>

【问题讨论】：

标签： jsf user-interface primefaces

【解决方案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 找到您的持有人 panelgrid 组件，添加一个新的 org.primefaces.component.panel.Panel 并设置一些字段并将其添加到父组件。

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

【讨论】：

【解决方案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" />

豆子：

@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绑定在一个表单中（例如复选框）

【讨论】：