Primefaces如何使用ajax切换仪表板小部件/面板可见性？答案

【问题标题】：Primefaces how to toggle a dashboard widget/panel visibility using ajax?Primefaces如何使用ajax切换仪表板小部件/面板可见性？
【发布时间】：2014-01-10 17:44:21
【问题描述】：

我有一个仪表板，其中包含大量运行良好的小部件/面板。

我正在寻找一种方法来使用 commandButton 动作侦听器切换特定的可见性，而无需刷新页面，即通过 AJAX。

<p:dashboard id="board" model="#{dashboardBean.model}">
    <!-- iteration code begins -->
    <p:panel id="#{wdgt.code}" header="#{wdgt.title}">  
        <h:outputText value="One of the dozens of widgets" />  
    </p:panel>
    <!-- iteration code ends -->
    <p:panel id="staticWdgtId" header="Static Widget Initially Invisible" visible="false">
         Some static content
    </p:panel>
</p:dashboard>

然后在后台 bean 中，有时需要通过 commandButton 或 actionListener 触发此操作...

public void showTheWidget() {
    DashboardColumn dbc = this.model.getColumn(1);      
    dbc.getWidget(2); // does not get a widget object with a visibility attribute :((
                        // so that I could manipulate such as dbc.getWidget(2).setVisible(true);
}

有什么想法吗？

【问题讨论】：

标签： ajax jsf primefaces dashboard

【解决方案1】：

静态方法

您可以将面板与布尔值相关联。

面板

<p:panel id="staticWdgtId" header="Static Widget Initially Invisible" 
         visible="#{bean.panelShow}">
     Some static content
</p:panel>

按钮

<p:commandButton actionListener="#{bean.actionListener()}" 
                 value="Button"
                 update=":staticWdgtId" />

豆

public void actionListener() {
    setShowPanel(true);
}

动态方法

使用display: none渲染所有面板

仪表板

<p:dashboard id="board" model="#{dashboardBean.model}">    
   <p:panel id="#{wdgt.code}" header="#{wdgt.title}" style="display: none">  
       <h:outputText value="One of the dozens of widgets" />  
   </p:panel>           
</p:dashboard>

远程命令

<p:remoteCommand name="panelsToShow" 
                 actionListener="#{bean.panelsToShowAction()}" 
                 oncomplete="handleComplete(xhr, status, args)" />

bean.panelsToShowAction() 你需要Gson

public void panelsToShowAction() { 
   List<String> panels = new ArrayList<String>();

   //iterate over the panels you want to show, and put #{wdgt.code} which is the id of the panel
   panels.add("Code1");//id
   panels.add("Code2");//id     

   RequestContext requestContext = RequestContext.getCurrentInstance();
   requestContext.addCallbackParam("panels", new Gson().toJson(panels));

}

$(document).ready(function() {
   panelsToShow();
})

function handleComplete(xhr, status, args) {  
   var panels = eval('(' + args.panels + ')');
   for (var i = 0, len = panels.length; i < len; i++) {
        $('#'+panels[i]).show();
    }
}

【讨论】：