应该在 p:tree 上使用什么事件来选择树节点并具有上下文菜单? [英] What event should be used on a p:tree to select a tree node and have a context menu?

问题描述

我正在创建一个带有上下文菜单的 PrimeFaces (5.3) 树.所选节点应存储在 #{myBean.selectedNode} 中.当我使用鼠标左键选择一个节点时，会设置正确的节点.但是，当我尝试从上下文菜单对节点运行操作时，没有先选择它，正确的节点没有设置(我的 bean 中的 setter 没有被调用).

I'm creating a PrimeFaces (5.3) tree with a context menu. Selected nodes should be stored in #{myBean.selectedNode}. When I select a node using the left mouse button the correct node is set. But, when I try to run an action on a node from a context menu, without selecting it first, the correct node isn't set (the setter in my bean is not called).

我正在关注 PrimeFaces 展示中的示例.如您所见，在 PrimeFaces 展示中，您可以立即右键单击一个节点，然后单击查看"，growl 将显示正确的节点.

I'm following the example in the PrimeFaces showcase. As you can see, in the PrimeFaces showcase you are able to immediately right click a node, click "View", and the growl will display the correct node.

这是我的设置:

它是 ViewScoped 并且有一个带有 getter 和 setter 的 private TreeNode selectedNode.

It is ViewScoped and there is a private TreeNode selectedNode with getter and setter.

以下是有趣的部分:

public void onNodeSelect(NodeSelectEvent event) {
    MyTreeNode myTreeNode = (MyTreeNode) event.getTreeNode();
    myController.setSelected(myTreeNode.getEntity());
}

public void addChild(String name) {
    MyTreeNode myTreeNode = (MyTreeNode) selectedNode;
    MyTreeNode childNode = myTreeNode.addChild(name);
    myController.setSelected(childNode.getEntity());
    myController.insert();
}

XHTML

<h:form id="mainForm">
    <p:tree value="#{myBean.root}" var="node"
            id="myTree" dynamic="true"
            selectionMode="single" selection="#{myBean.selectedNode}">
        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"
                    type="myType">
            <h:outputText value="#{node}"/>
        </p:treeNode>
        <p:ajax event="select" listener="#{myBean.onNodeSelect}" />
    </p:tree>

    <p:contextMenu for="myTree">
        <p:menuitem action="#{myBean.addChild('new')}"
                    value="Add"
                    process="@this"
                    update=":mainForm:myTree"/>
    </p:contextMenu>
</h:form>

我能够通过替换 JavaScript 中的 PrimeFaces.widget.BaseTree.nodeRightClick 函数来解决这个问题，以便在右键单击时触发 fireNodeSelectEvent.

I was able to solve this problem by replacing the PrimeFaces.widget.BaseTree.nodeRightClick function in JavaScript in order to trigger the fireNodeSelectEvent on right click.

PrimeFaces.widget.BaseTree.prototype.nodeRightClick = function(e, a) {
    PrimeFaces.clearSelection();
    if ($(e.target).is(":not(.ui-tree-toggler)")) {
        var d = a.parent(), b = a.hasClass("ui-tree-selectable");
        if (b && this.cfg.selectionMode) {
            var c = this.isNodeSelected(d);
            if (!c) {
                if (this.isCheckboxSelection()) {
                    this.toggleCheckboxNode(d)
                } else {
                    this.unselectAllNodes();
                    // Fixed right click selecting
                    // original code: this.selectNode(d, true)
                    this.selectNode(d); // <-- Fix
                }
            }
            this.fireContextMenuEvent(d)
        }
    }
}

这对我来说似乎是一个错误，所以我在 GitHub 上创建了一个问题.此问题已关闭，因为无法修复"并带有评论请使用 contextMenu 事件".

This seemed like a bug to me, so I created an issue on GitHub. This issues was closed as "won't fix" with the comment "Please use contextMenu event".

我已经检查了文档的树和 contextMenu 部分两次.应该在什么地方使用什么事件?我在 GitHub 上问了同样的问题，但没有回应.

I've checked the tree and contextMenu section of the documentation twice. What event should be used where? I've asked the same question at GitHub, but there was no response.

推荐答案

阅读您报告的问题，我调查了代码(它是打开的).似乎 p:tree 有一些未记录的事件，contextMenu 是其中之一(dragdrop 是另一个).

Reading the issue you reported, I investigated the code (it is open). It seems that p:tree has some undocumented events, contextMenu being one of them (dragdrop being the other).

5.3 java-source 和 5.3 javascript-source 包含对 contextMenu 事件的引用，所以

The 5.3 java-source and 5.3 javascript-source contains references to a contextMenu event, so

<p:ajax event="contextMenu" listener="#{myBean.onContextMenu}" />

和

public void onContextMenu(NodeSelectEvent event) {
    MyTreeNode myTreeNode = (MyTreeNode) event.getTreeNode();
    myController.setSelected(myTreeNode.getEntity());
}

会起作用.请注意，没有 ContextMenuEvent 但它接受/需要一个 NodeSelectEvent

will work. Notice that there is no ContextMenuEvent but that it accepts/needs a NodeSelectEvent

这篇关于应该在 p:tree 上使用什么事件来选择树节点并具有上下文菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！