2013-04-04 133 views
1

您將如何去動態添加面板在primefaces?動態添加和刪除面板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> 

回答

0

只要我願意窩我<p:panelrendered一個<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(如一個複選框)

8

假設你有一個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使用新數據更新自己。