如何在 jsPlumb 中获取连接数据

Question

我制作了一个小节点表，我可以从中拖放连接，并通过输入不同节点的 ID 来创建连接。

我无法从the docs 中找出答案，也无法在网上找到任何关于如何获取与什么相关的数据的示例，以及我使用jsPlumb.getConnections() 或jsPlumb.isSource 或isTarget 找到的示例或还有什么。

有谁知道我将如何实现某种功能来告诉我哪些 id 与什么相关联？

jsFiddle

JavaScript：

var wire_style;
var line_width = 8;

window.onload = function get_styles(){
    wire_style = { 
        isSource:true,
        isTarget:true,
        connector : [ "Straight" ],
        connectorStyle:{ 
            strokeStyle:$('#colour_menu').val(),
            lineWidth:line_width, 
        },
        endpoint: ["Rectangle", {
            radius: 4,
        }],
        //endpointStyle:{ },
        container:$('#breadboard'), 
    };
    var startpoint = jsPlumb.addEndpoint($('.hole'), wire_style);
}

// delete connection when clicked
 jsPlumb.bind('click', function (connection, e) {
     jsPlumb.detach(connection);
 });

// change colour when option selected
$(window).load(function(){
    $('#colour_menu').on('change', function () {
        wire_style.connectorStyle.strokeStyle = $('#colour_menu').val();
    });
});

// connect id one and id two on button click
$(window).load(function(){
    $('#connect_button').on('click', function () {
        var x = $('#x').val();
        var y = $('#y').val();
        connect(x ,y);
    });
});

// connect holes function
function connect(to,from){
    jsPlumb.connect({
        source:from, 
        target:to,
                paintStyle:{ 
            strokeStyle:$('#colour_menu').val(), 
            lineWidth:line_width 
        },
    }, wire_style); // including wire styles
}

HTML：

<script type='text/javascript' src="https://jsplumb.googlecode.com/files/jquery.jsPlumb-1.4.1-all-min.js"></script>

<input type="text" id="x"/>
<input type="text" id="y"/>
<button id="connect_button">Connect</button>


<select id="colour_menu">
<option selected="selected" value="limegreen">  Wire colour</option>
<option class="black"       value="black">      Black   </option>
<option class="red"         value="red">        Red     </option>
<option class="Orange"      value="Orange">     Orange  </option>
<option class="yellow"      value="yellow">     Yellow  </option>
<option class="limegreen"   value="limegreen">  Green   </option>
<option class="DodgerBlue"  value="DodgerBlue"> Blue    </option>
<option class="DarkOrchid"  value="DarkOrchid"> Violet  </option>
</select>

<div id="breadboard">
    <table>
        <tr id="node1" class="node">
            <td><div id="1" class='hole'></div></td>
            <td><div id="2" class='hole'></div></td>
            <td><div id="3" class='hole'></div></td>
            <td><div id="4" class='hole'></div></td>
            <td><div id="5" class='hole'></div></td>
            <td></td>
            <td><div id="6" class='hole'></div></td>
            <td><div id="7" class='hole'></div></td>
            <td><div id="8" class='hole'></div></td>
            <td><div id="9" class='hole'></div></td>
            <td><div id="10" class='hole'></div></td>
        </tr>
        <tr id="node2" class="node">
            <td><div id="11" class='hole'></div></td>
            <td><div id="12" class='hole'></div></td>
            <td><div id="13" class='hole'></div></td>
            <td><div id="14" class='hole'></div></td>
            <td><div id="15" class='hole'></div></td>
            <td></td>
            <td><div id="16" class='hole'></div></td>
            <td><div id="17" class='hole'></div></td>
            <td><div id="18" class='hole'></div></td>
            <td><div id="19" class='hole'></div></td>
            <td><div id="20" class='hole'></div></td>
        </tr>
    </table>
</div>

Answer 1

每当创建连接时，都会触发“jsPlumbConnection”。因此，您需要绑定该事件以存储连接详细信息。代码：

jsPlumb.bind("jsPlumbConnection", function(ci) { // ci is connection info.
    var s=ci.sourceId,t=ci.targetId;
    console.log(s+" -> "+t);
});

更新：

事件名称现在更改为 connection(Source) 而不是 jsPlumbConnection