Question

我们正在开发一个项目，该项目使用JSPlumb进行工作流渲染并维护包含节点（id，位置，文本等）和连接的单独数据模型，使其与使用jsPlumb.bind的事件保持同步

当我重新创建我的连接时，我正在使用源和目标参数调用jsPlumb.connect，但似乎ID是在幕后创建的，因此与从数据模型加载的ID不匹配。这样就可以了，除了在去除时我不想通过模型中的ID删除该连接...

有没有办法手动设置连接器的ID？

由于

Answer 1

您可以直接从连接中设置ID：

var conn=jsPlumb.getConnections({
  scope:'myScope", 
  source:"mySourceElement", 
  target:"myTargetElement"
});

conn.id=elem.connectionId;

Answer 2

从API Documents我找不到使用属性ID获取Connections的功能，即使您可以使用setParameter（API DOC）将ID设置为连接。相反，您可以删除与sourceId和targetId的连接，而不是通过连接ID。

var conn=jsPlumb.getConnections({
  scope:'myScope", 
  source:"mySourceElement", 
  target:"myTargetElement"
});
jsPlumb.detach(conn,param)  //by default param is false which defines whether to fire event on connection detach

Answer 3

我有一个例程可以保存然后恢复整个流程图。以下是我能够以编程方式设置连接器的ID的方法。

var connections = flowChart.connections;
$.each(connections, function( index, elem ) {
    var connection1 = jsPlumb.connect({
        source: elem.pageSourceId,
        target: elem.pageTargetId,
        label: elem.connectionLabel,
        id: elem.connectionId,
        connector: "Flowchart",
        anchors: ["BottomCenter", [0.75, 0, 0, -1]],
        overlays:[ 
            "PlainArrow", 
            [ "Label", { location:1,
            id:"arrow",
            length:12,
            foldback:1,
            width:12,
            cssClass:"aLabel"
            }]
        ],
        connectorOverlays:[ 
            [ "Arrow", { width:10, length:30, location:1 } ],
            [ "Label", { label:"foo" } ]
        ],
    });

Answer 4

var c = instance.connect({
     source: sourceNodeId,
     target: targetNodeId                   
});
$(c).attr('id', connection_id);

在两个节点之间创建连接时，可以将其存储在变量中。之后，Id可以轻松添加jQuery。

Answer 5

var connection = jsPlumb.connect({
     source: source,
     target: target
});
$(connection.canvas).attr('id', id);

请注意与{chabeee答案不同的connection.canvas。

JSPlumb - 设置连接ID

5 个答案: