javascript - 如何使用目标 div 中的数据属性作为 PrimeFaces ContextMenu 结果中的 View 参数

Question

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

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

这一切看起来都很简单，直到我走到最后一步，我似乎找不到一种方法来让它发挥作用。

例如

  <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 端获取该组，但我不知道如何将函数绑定(bind)到 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 以在激活之前更新链接:

  <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 库的解决方案......