jsplumb.连接不能为动态创建的端点工作

我需要帮助来理解jsplumb。连接的概念。我试图从xml文件创建端点，并试图连接端点。但是我可以生成端点，但不能生成连接。

XML文件

<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>

html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <script type="text/javascript">

$(document).ready(function()
      {

var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;
  $.get('data1.xml', function(d){      
        $(d).find('apps').each(function(){  
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }]; 
while($(this).children()[i].nodeName!=null)
{
nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');
            var nodeName = jsPlumb.addEndpoint( nodeName, {
                overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],               
        paintStyle: { fillStyle: nodeVal},
                endpoint: [nodeStyle , { radius: nodeRadius }]
           });
i++;
}
jsPlumb.bind("ready", function () {
             jsPlumb.connect({
                source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },                
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
                connector: "Straight",
                detachable: false,
                overlays: [
        ["Label", {
            fillStyle: "rgba(100,100,100,80)",
            color: "white",
            font: "12px sans-serif",            
            borderStyle: "black",
            borderWidth: 2
        }],
        ["Arrow", { location: 0.5}]
    ]
            })
 });
        });
    });
});  
    </script>
</head>
<body>
    <div id="source" style="position: absolute; left: 100px; top: 250px;">
    </div>
    <div id="target" style="position: absolute; left: 600px; top: 250px;">
    </div>
</body>
</html>

这可以通过编程方式完成，首先设置每个端点的uuid参数，如下所示:

jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});

然后将它们连接起来

jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });
//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });

html:

<div id="0" class="window"></div>
<div id="1" class="window"></div>

裸骨js:

jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });

相关内容

最新更新

热门标签：