右鍵單擊primefaces treenode時，不會觸發select事件

Question

我有jsf頁面：

<p:contextMenu for="treeProfileSetEvent"
                                   nodeType="PROFILESET">
                        <p:menuitem value="#{lang['common.button.add']}" 
                                    icon="ui-icon-plus"
                                    update="@([id$=editPanel_event])"
                                    actionListener="#{profileSetEventController.prepareAdd()}">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" value="#{vpcrfConst.BTN_ADD}" />
                        </p:menuitem>                     
                        <p:menuitem value="#{lang['common.button.delete']}" 
                                    icon="ui-icon-close"
                                    update="@([id$=btnPanel]) @([id$=treeProfileSetEvent]) @([id$=msgInfo])" 
                                    actionListener="#{profileSetEventController.prepareDelete()}"
                                    oncomplete="PF('deleteDialog').show()">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_DELETE}" />                            
                        </p:menuitem>                                          
                    </p:contextMenu>
                    <p:contextMenu for="treeProfileSetEvent"
                                   nodeType="PARENT">   
                        <p:menuitem value="#{lang['common.button.edit']}" 
                                    icon="ui-icon-pencil"                                    
                                    update="@([id$=editPanel_profileSetEvent])"
                                    actionListener="#{profileSetEventController.prepareEdit()}">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_EDIT}" />
                        </p:menuitem>
                        <p:menuitem value="#{lang['common.button.delete']}" 
                                    icon="ui-icon-close"
                                    update="@([id$=btnPanel]) @([id$=treeProfileSetEvent]) @([id$=msgInfo])" 
                                    actionListener="#{profileSetEventController.prepareDelete()}"
                                    oncomplete="PF('deleteDialog').show()">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_DELETE}" />                            
                        </p:menuitem>                                          
                    </p:contextMenu>
                    <p:contextMenu for="treeProfileSetEvent"                                  
                                   nodeType="PARENT_HAS_CHILD">
                        <p:menuitem value="#{lang['common.button.delete']}" 
                                    icon="ui-icon-close"
                                    ajax="true"
                                    update="@([id$=btnPanel]) @([id$=treeProfileSetEvent]) @([id$=msgInfo])" 
                                    actionListener="#{profileSetEventController.prepareDelete()}"
                                    oncomplete="PF('deleteDialog').show()">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_DELETE}" />                            
                        </p:menuitem>                                          
                    </p:contextMenu>
                    <p:contextMenu for="treeProfileSetEvent"
                                   nodeType="CHILD">    
                        <p:menuitem value="#{lang['common.button.edit']}" 
                                    icon="ui-icon-pencil"
                                    update="@([id$=editPanel_profileSetEvent])"
                                    actionListener="#{profileSetEventController.prepareEdit()}">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_EDIT}" />
                        </p:menuitem>
                        <p:menuitem value="#{lang['common.button.delete']}" 
                                    icon="ui-icon-close"
                                    update="@([id$=btnPanel]) @([id$=treeProfileSetEvent]) @([id$=msgInfo])" 
                                    actionListener="#{profileSetEventController.prepareDelete()}"
                                    oncomplete="PF('deleteDialog').show()">
                            <f:setPropertyActionListener target="#{profileSetEventController.formStatus}" 
                                                         value="#{vpcrfConst.BTN_DELETE}" />                            
                        </p:menuitem>                                          
                    </p:contextMenu>
                    <p:tree id="treeProfileSetEvent"
                            value="#{profileSetEventController.root}"
                            selection="#{profileSetEventController.selectedNode}"
                            dynamic="true"                            
                            selectionMode="single"   
                            animate="true"
                            cache="true"
                            var="ps"
                            styleClass="vpcrf-tree-50pc">
                        <p:ajax event="select" listener="#{profileSetEventController.onNodeSelectListener}" update="@([id$=btnPanel]) @([id$=dlgProfileSetEvent])" />
                        <p:ajax event="expand" listener="#{profileSetEventController.onNodeExpandListener}" update="@([id$=btnPanel]) @([id$=dlgProfileSetEvent])" />
                        <p:treeNode id="parentNode"                                     
                                    icon="vpcrf-icon-profile" 
                                    type = "PROFILESET">
                            <h:outputText value="#{ps}" title="#{ps}"
                                          styleClass="vpcrf-txt-400" />
                        </p:treeNode>
                        <p:treeNode id="eventParent" icon="vpcrf-icon-event-parent" type = "PARENT">
                            <h:outputText value="#{ps}" title="#{ps}"
                                          styleClass="vpcrf-txt-400" />
                        </p:treeNode>
                        <p:treeNode id="eventParentHasChild" icon="vpcrf-icon-event-parent" type = "PARENT_HAS_CHILD">
                            <h:outputText value="#{ps}" title="#{ps}"
                                          styleClass="vpcrf-txt-400" />
                        </p:treeNode>
                        <p:treeNode icon="vpcrf-icon-event-child" type = "CHILD">
                            <h:outputText value="#{ps}" title="#{ps}"
                                          styleClass="vpcrf-txt-400" />
                        </p:treeNode>
                    </p:tree>

和控制器：

    public void onNodeSelectListener(NodeSelectEvent e) {
        try {            
            selectedNode = e.getTreeNode();
            if (selectedNode.getData() instanceof ProfileSetDTO) {
                selectedProfileSet = (ProfileSetDTO) selectedNode.getData();
            } else {
                event = (EventDTO) selectedNode.getData();
                System.out.println(event.getEventName());
            }
            profileSet = null;
            formStatus = Const.CLEAR;
        } catch (Exception ex) {
            reportError("msgInfo", "msg.error.unknown");
            logger.error(ex, ex);
        }
    }

問題是ajax事件選擇僅在我左鍵單擊treenode時才觸發，而右鍵單擊則不起作用。 當我右鍵單擊節點時，有什么方法可以使其工作？ 任何幫助都會很棒。

Answer 1

在Primefaces 5.x（我使用的是5.1，但也應該在較新版本上工作）上，您應該能夠通過在JSF頁面中添加與contextMenu相關的ajax事件來解決問題，如下所示：

<p:ajax event="contextMenu" listener="#{profileSetEventController.onNodeSelectListener}" update="@([id$=btnPanel]) @([id$=dlgProfileSetEvent])" />

我傾向於使用此解決方案，而不是已經發布的解決方案（“替代” Primefaces onRightClick函數的解決onRightClick ），原因有三點。

首先，無需修改Primefaces javascript（如果較新的版本對其有所更改，該怎么辦？在這種情況下，您可能必須修改自定義腳本！）

其次，您可能希望通過在備用Bean中使用e.isContextMenu()來e.isContextMenu()觸發哪個單擊（向左或向右）來分離偵聽器onNodeSelectListener的行為，因此控制器可能變為：

public void onNodeSelectListener(NodeSelectEvent e) {
    if (e.isContextMenu()) {
      // right click has been fired
    } else {
      // left click has been fired
    }
}

Primefaces腳本nodeRightClick this.selectNode(d, true)中的第二個參數true nodeRightClick用於此目的。 換句話說，通過使用this.selectNode(d) （如覆蓋腳本所做的那樣），將無法確定是通過左擊還是右鍵單擊調用了偵聽器。

最后，您可能希望對JSF頁面中的兩個事件（ select和contextMenu ）使用不同的偵聽器（ onRightClickSelectListener ），如下所示：

<p:ajax event="select" listener="#{profileSetEventController.onNodeSelectListener}" update="@([id$=btnPanel]) @([id$=dlgProfileSetEvent])" />
<p:ajax event="contextMenu" listener="#{profileSetEventController.onRightClickSelectListener}" update="@([id$=btnPanel]) @([id$=dlgProfileSetEvent])" />

因此在后備bean中，如下所示：

public void onNodeSelectListener(NodeSelectEvent e) {
   // called when a select event occurs
}

public void onRightClickSelectListener(NodeSelectEvent e) {
  // called when a contextMenu event occurs
}

因此，僅對右鍵單擊使用contextMenu event ，而不是對兩次單擊使用select event ，可能仍然是一種更干凈的方法。

希望能有所幫助。

Answer 2

我認為您正面臨與我同樣的問題 。 我還是不明白這是為什么在PrimeFaces工作展示，但我可以通過更換PrimeFaces'修復它nodeRightClick處理器（JavaScript的）：

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)
        }
    }
}