在 primefaces 中单击 ESCAPE(ESC) 时关闭所有对话框答案

【问题标题】：Close all Dialogboxes when click ESCAPE(ESC) in primefaces在 primefaces 中单击 ESCAPE(ESC) 时关闭所有对话框
【发布时间】：2012-10-26 06:49:13
【问题描述】：

我正在使用 4-5 个 primefaces 对话框。当点击 ESC 我想关闭所有打开的对话框。

【问题讨论】：

这个标题和描述很有意义，因为您明确指定了操作（点击），但我不得不承认它完全令人困惑。

标签： java jsf primefaces

【解决方案1】：

通过widgetVar 指定的客户端对象调用对话框的hide() 函数。因此，如果您将 p:dialog 定义为：

<p:dialog widgetVar="dialog1" header="Dialog 1"/>
<p:dialog widgetVar="dialog2" header="Dialog 2"/>

您的 ESC 按钮应如下所示：

<p:commandButton value="ESC" onclick="dialog1.hide();dialog2.hide()"/>

您还可以创建一个可重复使用的 p:remoteCommand 来关闭所有对话框并在您的 p:commandButton 或 p:hotkey 中使用它 - 如果“单击 ESCAPE”是指点击 Escape 按钮：

<p:remoteCommand name="closeAll" onsuccess="dialog1.hide();dialog2.hide()"/>

然后在您的组件中引用closeAll() 命令：

<p:hotkey bind="esc" handler="closeAll()"/>
<p:commandButton value="ESC" onclick="closeAll()"/>

【讨论】：

【解决方案2】：

虽然帖子很旧，但答案是静态解决方案，这里是使用jQuery的动态解决方案。

function escDialog() {
   $(document).keyup(function(e) {
       if (e.keyCode == 27) { // esc code is 27 
           closeAllDialog() ;
       }   
   });
}

function closeAllDialog() {
   for (var propertyName in PrimeFaces.widgets) {
     if (PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.Dialog ||
         PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.LightBox) {
         PrimeFaces.widgets[propertyName].hide();
     }
   }
}

然后在你的 document.ready 中你会调用escDialog()

希望这会有所帮助。

【讨论】：