Question

我正在使用PrimeFaces 4.0。我有一个页面有三个对话框组件（对话框1，对话框2，对话框3）和三个按钮组件（按钮1，按钮2，按钮3），对话框1将通过单击按钮1显示，对话框2将通过单击显示按钮2和对话框3将通过单击按钮3显示。用户可以同时打开这三个对话框，这意味着用户可以使用这三个对话框进行一些工作，如下所示：

enter image description here

当用户在对话框中做一些工作时，我需要更改支持bean中的一些值并首先更新一些组件，当用户通过单击按钮显示对话框时，没有问题，我可以更改某些值用户单击触发的按钮的ActionListener，但是当用户显示三个对话框时，通过单击对话框更改活动对话框，如下所示：

enter image description here

如何将“对话框1”中的活动对话框更改为“对话框2”？

这是我的xhtml代码：

    <p:commandLink onclick="dialog1.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 1')}">button 1</p:commandLink><br/>
    <p:commandLink onclick="dialog2.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 2')}">button 2</p:commandLink><br/>
    <p:commandLink onclick="dialog3.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 3')}">button 3</p:commandLink><br/>
    <br/><hr/><h:outputText id="outputText" value="Active dialog: #{testBean.activeDialog}"/>

    <p:dialog id="dialog1"
          header="dialog 1"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog1"
          minimizable="true" 
          maximizable="true">
            dialog1
    </p:dialog>
    <p:dialog id="dialog2"
          header="dialog 2"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog2"
          minimizable="true" 
          maximizable="true">
            dialog2
    </p:dialog>
    <p:dialog id="dialog3"
          header="dialog 3"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog3"
          minimizable="true" 
          maximizable="true">
            dialog3
    </p:dialog>

我的视图bean：

public class TestBean extends BaseBean {

    private String activeDialog;

    public void changeActiveDialog(String dialog)
    {
        activeDialog = dialog;
    }

    public String getActiveDialog() {
        return activeDialog;
    }

    public void setActiveDialog(String activeDialog) {
        this.activeDialog = activeDialog;
    }
}

我用谷歌搜索了但我没有找到解决问题的方法。任何建议将不胜感激，谢谢。

Answer 1

尽管在同一时间打开多个对话框并不是一个好主意，但您可以随时使用javascript来实现您想要的效果。

单击或拖动对话框时会更改z-index，使其“活动”/高于其他元素，在这种情况下，您可以设置两个主要事件来监听：click和{{ 1}}然后通过dragstop将该对话框ID发送到managedBean，这是一个例子：

<强> 的javascript

remoteCommand

<强> XHTML

 $('.ui-dialog').on('click dragstop',function () {
    activeDialog([{name: 'activeDialog', value: $(this).attr('id')}]);//remoteCommand
 });

<强> managedBean

<p:remoteCommand name="activeDialog" actionListener="#{mainBean.activeDialog}"/>

demo github以及{{3}}上的工作示例。

注意：您应该在第一次打开对话框时保持actionListener。

Answer 2

我认为你不应该同时打开超过1个对话框尝试更改您的设计（例如，创建1个大对话框而不是3个对话框。）

Primefaces在多个对话框之间切换

2 个答案: