Question

我有一个仪表板，里面有相当数量的小工具/面板，工作正常。

我正在寻找一种方法，使用commandButton ction侦听器切换特定的可见性，而无需刷新页面，即通过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);
}

有什么想法吗？

Answer 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);
}

DYNAMIC APPROACH

使用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>

remoteCommand

<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));

}

JS

$(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();
    }
}

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

1 个答案: