Primefaces: ContextMenu nie pojawia się w overlayPanel

Question

Próbuję dodać contextMenu w drzewie, aby wykonać niestandardową akcję. To drzewo jest zaimplementowane wewnątrz nakładki. Zauważyłem, że contextMenu pojawia się tylko w przypadkowych sytuacjach, takich jak po zaznaczeniu i odznaczeniu niektórych elementów na drzewie. Dowolny pomysł?

<p:overlayPanel id="advancedSearchPanel" 
    styleClass="ui-advanced-search-overlay" 
    for="advancedSearch" 
    hideEffect="fade" 
    my="right top" 
    widgetVar="advancedSearchPanelWidgetVar" > 
     <ui:include src="/search/advancedSearch-form.xhtml"/> 
</p:overlayPanel> 

advancedSearch-forma

<p:panelGrid id="panelAdvanced" styleClass="borderless"> 
... 
    <p:row> 
     <p:column colspan="4"> 
      <p:outputLabel value="#{text['searchForm.classifiers']}" for="treeClassifier" styleClass="paddingLabelGrid"/> 

      <p:contextMenu id="contextSearch" for="treeClassifier"> 
       <p:menuitem value="Escolha todos" update=":searchForm:treeClassifier" actionListener="#{navBarController.displaySelectedSingle}"/> 
      </p:contextMenu> 

      <p:tree id="treeClassifier" 
       value="#{navBarController.rootClassifier}" 
       var="node" selectionMode="checkbox" 
       selection="#{navBarController.selectedClassifiers}" 
       style="height: 200px;width: 540px; margin-bottom: 0px; overflow: auto" 
       propagateSelectionDown="false" 
       propagateSelectionUp="false"> 

        <p:ajax event="select" update=":searchForm:btnSearch"/> 
        <p:ajax event="unselect" update=":searchForm:btnSearch"/>  

        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> 
         <h:outputText value="#{node.description}(#{node.code})"/> 
        </p:treeNode> 
      </p:tree> 
     </p:column> 
    </p:row> 
... 

Answer 1

Spróbuj tak:

mój advancedSearch-form.xhtml

<?xml version="1.0" encoding="UTF-8" ?> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
       xmlns:ui="http://java.sun.com/jsf/facelets" 
       xmlns:h="http://java.sun.com/jsf/html" 
       xmlns:f="http://java.sun.com/jsf/core" 
       xmlns:c="http://java.sun.com/jsp/jstl/core" 
       xmlns:p="http://primefaces.org/ui">  

<h:form id="searchForm"> 
    <p:panelGrid id="panelAdvanced" styleClass="borderless"> 
     <p:row> 
      <p:column colspan="4"> 
       <p:contextMenu id="contextSearch" for="treeClassifier"> 
           <p:menuitem value="Escolha todos" update="treeClassifier" actionListener="#{treeView.displaySelectedSingle}"/> 
       </p:contextMenu> 
       <p:tree id="treeClassifier" value="#{treeView.root}" var="node" selectionMode="checkbox" selection="#{treeView.selectedClassifiers}" 
          style="height: 200px;width: 540px; margin-bottom: 0px; overflow: auto" 
          propagateSelectionDown="false" 
          propagateSelectionUp="false"> 
           <p:ajax event="select" global="false" listener="#{treeView.reset}" /> 
           <p:ajax event="unselect" global="false" listener="#{treeView.reset}" />  
           <p:ajax event="contextMenu" global="false" listener="#{treeView.onContextMenu}"/>  
           <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> 
            <h:outputText value="#{node.nodeName}"/> 
           </p:treeNode> 
       </p:tree> 
      </p:column> 
     </p:row> 
     </p:panelGrid> 
</h:form>   
</ui:composition> 

A moja Fasola:

@Component(value="treeView") 
@Scope(value = "session") 
public class TreeView implements Serializable { 

    private TreeNode[] selectedClassifiers; 

    public TreeNode[] getSelectedClassifiers() { 
     return selectedClassifiers; 
    } 

    public void setSelectedClassifiers(TreeNode[] selectedClassifiers) { 
     this.selectedClassifiers = selectedClassifiers; 
    } 

    private TreeNode selectedClassifier; 

    public void reset(){ 
     selectedClassifier = null; 
    } 

    public void displaySelectedSingle(){ 
     if(selectedClassifier != null){ 
      List<TreeNode> selected = new ArrayList<TreeNode>(); 
      for(int i=0; i < selectedClassifiers.length; i++){ 
       selected.add(selectedClassifiers[i]); 
       if(selectedClassifiers[i].equals(selectedClassifier)) 
        selected.addAll(selectionRecursive(selectedClassifier)); 
      } 
      selectedClassifiers = selected.toArray(new TreeNode[selected.size()]); 
     } 

    } 

    public void onContextMenu(NodeSelectEvent event){ 
    selectedClassifier = event.getTreeNode(); 
    } 

    public List<TreeNode> selectionRecursive(TreeNode node){ 

     List<TreeNode> selected = node.getChildren(); 

     for(TreeNode child : node.getChildren()){ 
      selected.addAll(selectionRecursive(child)); 
      child.setSelected(true); 
     } 

     return selected; 
    } 
} 

Metoda selectionRecursive (węzeł TreeNode) potrzeba debug, ale w moim przypadku wszystkie prace wspaniały.

Answer 2

Nie jestem pewien, o co naprawdę chcesz osiągnąć, ale:

Używasz 2 cechy składnika drzewa.

• Pole wyboru (multiple) wybór
• menu kontekstowe na węzłach

Zastosowanie obu funkcji jednocześnie nie jest obecnie obsługiwana bt Primefaces. Za każdym razem, gdy klikniesz prawym przyciskiem myszy węzeł, pojawi się menu kontekstowe, a następnie zostanie wybrany/odznaczony węzeł. Menu kontekstowe nie wyświetla się, jeśli klikniesz na zewnątrz węzła (tło kontenera lub między węzłami)

Jeśli chcesz mieć jedno menu kontekstowe dla całego drzewa (np. Zaznacz wszystko, Odznacz wszystko, Wybierz dowolne ...), po prostu usuń dla atrybut contextMenu:

zamiast:

<p:contextMenu id="contextSearch" for="treeClassifier"> 

wystarczy napisać

<p:contextMenu id="contextSearch"> 

W ten sposób kontekst contextMenu pojawia się w dowolnym miejscu, klikając prawym przyciskiem myszy kontener (p:column w twoim przypadku).