Question

我正在使用PrimeFaces网络应用。我刚开始接触它，所以请耐心等待。

我有一个具有多种类型节点的树 - 每个节点都有自己的上下文菜单。我的问题是，我希望能够在选择单个节点和多个节点时显示不同的上下文菜单。 Tree的选择模式显然应该是multiple。

代码：

    <!-- Here should be context menu for when multiple nodes are selected -->
    <!--        <p:contextMenu for="tree"> -->
    <!--            <p:menuitem value="Multiple Items Selected"> -->
    <!--            </p:menuitem> -->
    <!--        </p:contextMenu> -->

    <p:contextMenu for="tree" nodeType="type1">
        <p:menuitem value="Type 1 Selected">
        </p:menuitem>
    </p:contextMenu>

    <p:contextMenu for="tree" nodeType="type2">
        <p:menuitem value="Type 2 Selected">
        </p:menuitem>
    </p:contextMenu>

    <p:contextMenu for="tree" nodeType="type3">
        <p:menuitem value="Type 3 Selected">
        </p:menuitem>
    </p:contextMenu>

    <p:tree id="tree" value="#{treeBean.root}" var="node"
        selectionMode="multiple">
        <p:treeNode type="type1">
            <h:outputText value="#{node}" />
        </p:treeNode>

        <p:treeNode type="type2">
            <h:outputText value="#{node}" />
        </p:treeNode>

        <p:treeNode type="type3">
            <h:outputText value="#{node}" />
        </p:treeNode>
    </p:tree>

非常感谢！

Answer 1

我通过更改我想要隐藏的菜单项的CSS，在客户端完全解决了这个问题。

我使用单个上下文菜单进行单选和多次但我隐藏了我不想显示的项目以进行多项选择。在多次选择的情况下，我想要隐藏的每个菜单项都有一个style="class: multiple_tree_cm;"。我在树上使用了上下文菜单事件。

示例树：

<p:tree id="tree" widgetVar="treeWV">
    <p:ajax event"contextMenu" onstart="updateTreeContextMenu();"/>
     <p:treeNode .../>
</p:tree>

示例上下文菜单：

<p:contextMenu for="tree">
    <p:menuitem ... styleclass="multiple_tree_cm"/> <!-- don't want to show this for multiple selection -->
</p:contextMenu>

我通过向multiple_tree_cm类菜单项添加css类来隐藏菜单项。像这样：

function updateTreeContextMenu(event) {
    if (PF('treeWV') && PF('treeWV').selections && PF('treeWV').selections.length === 1) {
        $('.multiple_tree_cm').removeClass('disabled');
    } else {
        $('.multiple_tree_cm').addClass('disabled');
    }
}

的CSS：

.multiple_tree_cm {}
.disabled { height: 0 !important; display: none !important; }

PrimeFaces Tree - 在选择多个节点时显示不同的上下文菜单

1 个答案: