動態添加和刪除面板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

只要我願意窩我<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（如一個複選框）

Answer 2

假設你有一個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 ，需要動態地添加面板

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

的addPanel方法，此方法將通過它的ID找到你的持有人panelGrid的組件，添加一個新的org.primefaces.component.panel.Panel並設置了一些領域，並將其添加到父組件。

commandButton的update =「：myPanelGrid」屬性將通知panelGrid使用新數據更新自己。