动态添加和删除面板PrimeFaces

问题描述：

您将如何去动态添加面板在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>

答

只要我愿意窝我<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（如一个复选框）

答

假设你有一个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使用新数据更新自己。

动态添加和删除面板PrimeFaces

相关推荐