如何在连接 JSPLUMB 中获取端点标签？答案

【问题标题】：How to get endpoint labels in a connection JSPLUMB?如何在连接 JSPLUMB 中获取端点标签？
【发布时间】：2014-02-10 15:37:48
【问题描述】：

在附图中，div 1 和 div 3 是相连的。连接上有标签，上面写着 1-3（表示 div 1 和 div 3 已连接）。现在，当我单击一个按钮时，我想显示这样的“拖放”连接的端点标签名称，而不是 div id“1-3”。

简而言之，在 getAllConnections() 期间，如何获取连接中的端点标签名称？

【问题讨论】：

标签： javascript jquery jsplumb

【解决方案1】：

假设您创建这样的叠加层

endpoint.overlays = [["Label", {
            location: [0.5, 2.5],
            label: "1-3",
            id: 'myLabel'
        }]];

你只是这样做：

endpoint.getOverlay("myLabel").getLabel()

【讨论】：

【解决方案2】：

正如您所提到的，首先获取所有连接，然后为每个连接获取它们的端点，然后您可以从中获取其标签：

var con=jsPlumb.getAllConnections();
for(var i=0;i<con.length;i++){
    var e=con[i].endpoints; // Array of [source, target] Endpoint objects.
    var label1=e[0].getLabel();
    var label2=e[1].getLabel();
    console.log(label1+"->"+label2); 
}

更多请参考API DOC。希望这会有所帮助！

【讨论】：

这似乎只回显 null->null
@NickMitchell 创建一个 jsFiddle 来帮助你更快！

【解决方案3】：

假设您已经创建了“Drag”、“Drop”标签作为叠加层，如下所示：

overlays: [
   [ "Label", {
        location: [0.5, 1.5],
        label: "Drag",
        visible:true,
        id: "drag"
   } ]
]

您可以使用connection.endpoints[0] 获取连接的源端点。要获取此端点的标签值，您只需调用connection.endpoints[0].getOverlay("drag").getLabel();。

您可以通过迭代 jsPlumb.getConnections() 来获取连接对象，如下所示：

$.each(instance.getConnections(), function (index, connection) {
});

它对我有用。希望对你有帮助！

【讨论】：