PrimeFaces Tree - 选择多个节点时显示不同的上下文菜单
PrimeFaces Tree - show different context menu when selecting multiple nodes
我正在开发 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>
非常感谢!
我通过更改我想隐藏的菜单项的 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>
我通过将 css class 添加到 multiple_tree_cm class 菜单项来隐藏菜单项。
像这样:
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的选择模式显然应该是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>
非常感谢!
我通过更改我想隐藏的菜单项的 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>
我通过将 css class 添加到 multiple_tree_cm class 菜单项来隐藏菜单项。 像这样:
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; }