2013-04-04 107 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使用新数据更新自己。