Question

我尝试在树中添加contextMenu来执行自定义操作。该树在overlaypanel内实现。我观察到的是contextMenu只出现在随机情况下，例如在选择和取消选择树上的某些元素之后。有什么想法吗？

<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形式

<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

尝试这样：

my 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>

我的豆子：

@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;
    }
}

方法选择递归（TreeNode节点）需要调试，但在我的情况下，所有工作都很好。

Answer 2

我不确定你真正想要达到的目标，但是：

您正在使用树组件的2个功能。

复选框（多个）选择
节点上的上下文菜单

目前不支持使用这两种功能bt Primefaces。每当您右键单击某个节点时，都会显示contextMenu，然后选择/取消选择该节点。如果单击节点外部（容器背景或节点之间）

，则不会显示contextMenu

如果您想要整个树的单个contextMenu（即全选，取消全选，选择其他...），那么只需删除 for 属性> contextMenu ：

而不是：

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

写一下

<p:contextMenu id="contextSearch">

通过这种方式，只要您右键单击容器（p:column，就会出现 contextMenu ）。

Primefaces：ContextMenu不会出现在overlayPanel中

2 个答案: