您將如何去動態添加面板在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>
您將如何去動態添加面板在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使用新數據更新自己。