如何使用来自目标 div 的数据属性作为 PrimeFaces ContextMenu 结果中的视图参数

Question

我正在尝试执行以下操作：

来自简单的元素集合...
添加 PrimeFaces 上下文菜单...
将第一个菜单选项转到新页面...
将所选元素的数据属性作为视图传递参数

这一切看起来都很简单，直到我进行到最后一步，但我似乎无法找到一种方法来实现它。

例如

  <div class="group" data-group="GRP1">
    ...
  </div>

  <div class="group" data-group="GRP2">
    ...
  </div>

  <div class="group" data-group="GRP3">
    ...
  </div>

  <p:contextMenu targetFilter="div.group">
    <p:menuitem value="Edit" outcome="group.xhtml?group=GRP???"/>
  </p:contextMenu>

div 已生成 HTML，我对它们没有太多控制权，因此可能需要在客户端对 Javascript 做一些事情。

我试图从 Javascript 端获取该组，但我看不到如何将函数绑定到 beforeShow 处理程序。我可以看到，如果我可以注册正确的事件处理程序，那么 PF 代码会将事件传递给我（我可以从中获取目标元素和数据属性）：

  // from PF menu.js
  if(this.cfg.beforeShow) {
      var retVal = this.cfg.beforeShow.call(this, e);
      if(retVal === false) {
        return;
      }
  }

但我不确定如何访问它 - 如果我只是使用内联事件注册，那么我只能传递 Javascript 代码而不是对我的函数的引用：

  function doBeforeShow(menu, event) {
    var group = event.target.dataset['group'];
  }

  <p:contextMenu targetFilter="div.group" beforeShow="/* this is just executed JS not a bound function */">

无论如何，即使我可以从 JS 端获取组，我也不确定我会用它做什么...可能将它存储在某个地方并将另一个处理程序附加到 p:menuitem所以当它被选中时它可以在调用它之前修改结果？

所以我卡住了！有人对我如何让它工作有任何想法吗？

谢谢，

Answer 1

得到这个工作，虽然不确定这是最好的方法...

需要 PrimeFaces 的补丁才能在菜单小部件上存储 jQuery 事件：

--- src/main/resources/META-INF/resources/primefaces/menu/menu.js       (revision 12491)
+++ src/main/resources/META-INF/resources/primefaces/menu/menu.js       (working copy)
@@ -1109,6 +1109,9 @@
             top = top - height;
         }

+        // save the event which activated this menu
+        this.jqEvent = e;
+        
         if(this.cfg.beforeShow) {
             var retVal = this.cfg.beforeShow.call(this, e);
             if(retVal === false) {

然后将 "widgetVar" 添加到 contextMenu 以命名菜单小部件和一些客户端 javascript 在激活之前更新 link:

  <p:contextMenu targetFilter="div.group" widgetVar="ctxMenu">
    <p:menuitem value="Edit" onclick="fixGroupLink(PF('ctxMenu'), this);"
        outcome="group.xhtml?group=GRP???"/>
  </p:contextMenu>

  function fixGroupLink(menu, menuitem) {
    var grp = menu.jqEvent.target.dataset.group;
    menuitem.href = menuitem.href.replace(/group=.*$/, "group=" + grp);
  }

所以这行得通，我暂时将其标记为已接受，但很高兴任何人都能提出更好的解决方案，如果他们有更好的解决方案 - 特别是不包括自定义 PrimeFaces 库的...

如何使用来自目标 div 的数据属性作为 PrimeFaces ContextMenu 结果中的视图参数

How to use a data attribute from a target div as view param in a PrimeFaces ContextMenu outcome

javascript

jquery

primefaces

jsf-2.2