如何分离显示和数据mxgraph端口示例

Question

我正在使用mxgraph并将mxgraph端口示例用作我的应用程序的起点。 https://jgraph.github.io/mxgraph/javascript/examples/ports.html

该示例通过value对象的mxcell属性传递每个单元格的内容。显示内容是一个html标签，然后将其呈现在单元格内。下面的示例代码显示了在边栏上创建可拖动图标的过程，参数为graph, sidebar, label, image。

addSidebarIcon(graph, sidebar,
                '<h1 style="margin:0px;">Website</h1><br>'+
                '<img src="images/icons48/earth.png" width="48" height="48">'+
                '<br>'+
                '<a href="http://www.jgraph.com" target="_blank">Browse</a>',
                'images/icons48/earth.png');

然后，addSideBarIcon函数通过将其label参数作为MxCell的value属性传递来创建顶点。

v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);

我希望能够在每个单元格的value属性中添加一个JSON对象以存储非显示数据以及html标签，以用于显示。我想这样做而不修改基础原型。

addSidebarIcon(graph,
    sidebar, {
        display: '<h1 style="margin:0px;">Process</h1><br>' +
            '<img src="images/icons48/gear.png" width="48" height="48">' +
            '<br><select><option>Value1</option><option>Value2</option></select><br>',
        data: {
            key1: val1
        },
    }

执行此操作时，他的代码将value解释为html标签。在我希望仅将value.display解释为标签的地方。我不确定如何将html标签和json数据组合在一起，是否会喜欢一些建议。

Answer 1

您已经在同一文件中实现了addSidebarIcon ...

找到时：

v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);

您不必在那里使用“标签”，而是从JSON中提取显示值。