如何将 ContextMenu 添加到 Primefaces 中的图表元素答案

【问题标题】：How to add an ContextMenu to a Diagram Element in Primefaces如何将 ContextMenu 添加到 Primefaces 中的图表元素
【发布时间】：2020-10-17 01:36:18
【问题描述】：

是否可以将上下文菜单添加到图表中的元素？我能够将上下文菜单添加到 xhtml 文件中的整个图表中，但只有在用户右键单击元素时才会显示上下文菜单。

我尝试以编程方式解决它，但未显示上下文菜单。这是我的代码：

    DefaultDiagramModel model = new DefaultDiagramModel();
    model.setMaxConnections(-1);
    Element element = new Element();
    element.setData("someData");
    element.setId("testId");

    ContextMenu contextMenu = new ContextMenu();
    DynamicMenuModel menuModel = new DynamicMenuModel();
    DefaultMenuItem menuItem = new DefaultMenuItem("show Info");
    menuModel.addElement(menuItem);
    contextMenu.setModel(menuModel);
    contextMenu.setFor(element.getId());

    model.addElement(element);

我使用 Primefaces 7

【问题讨论】：

不是直接的。看看您是否可以在 PrimeFaces 用于图表的原始组件中获得某种 javascript 事件。如果可行，您可以（在某种程度上）让 PrimeFaces 上下文菜单菜单正常工作。如果你找不到底层组件的解决方案，就会变得很困难，而且工作量很大。

标签： jsf primefaces

【解决方案1】：

我遇到了同样的需求。而不是在 Bean 中添加 ContextMenu。我能够使用 xhtml 文件中的使其工作，如下所示：

创建一个新类用作数据

public class NodeElement implements Serializable {
        
    private Long id;
    private String title;
    private String type;
    //... other variables
    // getter and setters and other methods
}

创建元素的示例

Element element = new Element(new NodeElement(1L, "Element Title", "type1"), "30em", "16em");

在 diagram.xhtml 中

...
    <h:form id="patent-form" enctype="multipart/form-data">
        <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
        <p:diagram id="sample-graph" value="#{diagramBasicView.model}" styleClass="ui-widget-content" var="el">
            <f:facet name="element">
                <h:panelGroup layout="block" rendered="#{el.type == 'type1'}" id="type1-node" styleClass="type1-node" ps:data-id="#{el.id}">
                    <h:panelGroup laybout="block" styleClass="graph-node-content" ps:data-id="#{el.id}">
                        <h:outputText ps:title="Node Title: #{el.title}" ps:data-id="#{el.id}" value="#{el.title.length() gt 45 ? el.title.substring(0, 45) : el.title}" styleClass="graph-node-title"/>
                        <!-- ... OTHER data (make sure to use h:outputText or other JSF tags) -->
                        </h:panelGroup>
                    </h:panelGroup>
                    ...
                </h:panelGroup>
            <f:facet>
        </p:diagram>
        <!-- from https://stackoverflow.com/questions/35812682/jsf-primefaces-eventing-in-diagram-elements -->
        <p:remoteCommand name="elementClicked" actionListener="#{diagramBasicView.onSelection()}"/>
        <p:contextMenu for="type1-node" style="width: 220px; height: 150px;">
            <p:menuitem value="Show Info"
                        update="sample-graph"
                        id="show-info-menu-item"/>
            <p:menuitem value="Second Menu"
                        update="sample-graph"
                        id="second-menu-item"/>
        </p:contextMenu>
    </h:form>
    <!-- use to get the id from the element as data attribute -->
    <script>
        $('.ui-diagram > .ui-diagram-element').contextmenu(function(info){
            // console.log($(info.target).data('id'));
            elementClicked([ {
                        name : 'elementId',
                        value : $(info.target).data('id')
            } ]);
        });
    </script>
...

【讨论】：