可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have created a JSPlumb Flowchart. Now, I want to export this flowchart into its corresponding JSON or XML script to save and perform various operations. What is more compatible ? Either of them is perfectly fine. Please enlighten me on this. The JsPlumb code that I developed (with the help of various sites) is as given below.

<html> <head>     <title>Example</title>             <script type="text/javascript" src="Jquery\jq.js"></script>                 <script type="text/javascript" src="Jquery\jq-ui.min.js"></script>       <script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script> </head> <body>  <div  id="main">     <div id="block1" class="node">node 0</div>     <div id="block2" class="node">node 1</div>     <div id="block3" class="node">node 2</div>     <div id="block4" class="node">node 3</div>   </div>      <script type="text/javascript">                  var targetOption = {anchor:"TopCenter",                                                     maxConnections:-1,                                                     isSource:false,                                                     isTarget:true,                                                     endpoint:["Dot", {radius:8}],                                                     paintStyle:{fillStyle:"#66FF00"},                                                         setDragAllowedWhenFull:true}                  var sourceOption = {anchor:"BottomCenter",                                                         maxConnections:-1,                                                     isSource:true,                                                     isTarget:false,                                                     endpoint:["Dot", {radius:8}],                                                     paintStyle:{fillStyle:"#FFEF00"},                                                         setDragAllowedWhenFull:true}                          jsPlumb.bind("ready", function() {                          jsPlumb.addEndpoint('block1', targetOption);                         jsPlumb.addEndpoint('block1', sourceOption);                          jsPlumb.addEndpoint('block2', targetOption);                         jsPlumb.addEndpoint('block2', sourceOption);                          jsPlumb.addEndpoint('block3', targetOption);                         jsPlumb.addEndpoint('block3', sourceOption);                          jsPlumb.addEndpoint('block4', targetOption);                         jsPlumb.addEndpoint('block4', sourceOption);                          jsPlumb.draggable('block1');                         jsPlumb.draggable('block2');                         jsPlumb.draggable('block3');                         jsPlumb.draggable('block4');                                         });       </script>      <style type="text/css">         .node {     border:1px solid black;     position:absolute;     width:5em;     height:5em;     padding: 0.5em;     z-index:1;     border-radius:0.5em;     box-shadow: 2px 2px 19px #aaa;     background: white;     }      #node0 { top:10em; left:22em;}     #node1 { top:15em; left:32em;}      </style>    </body> </html>

Thanks a lot in advance.

回答1:

To export jsPlumb flowchart to JSON / XML firstly you would need to collect information about flowchart elements, then serialize it.

Enumerating Blocks

To get information about blocks you can use plain jQuery:

var blocks = [] $("#main .node").each(function (idx, elem) {     var $elem = $(elem);     blocks.push({         blockId: $elem.attr('id'),         positionX: parseInt($elem.css("left"), 10),         positionY: parseInt($elem.css("top"), 10)     }); });

Enumerating Connections

To get information about connections between elements you can use jsPlumb API, particularly "jsPlumb.getConnections()" method:

var connections = []; $.each(jsPlumb.getConnections(), function (idx, connection) {     connections.push({         connectionId: connection.id,         pageSourceId: connection.sourceId,         pageTargetId: connection.targetId     }); });

Serializing to JSON

Once you collected all flowchart data you can serialize it to JSON:

var serializedData = JSON.stringify(blocks);

回答2:

We can use GetAllConnections instead of getConnection.

var connections = []; function GetConn() {       //connections = jsPlumb.getAllConnections();  $.each(jsPlumb.getAllConnections(), function (idx, connection) { connections.push({ connectionId: connection.id, pageSourceId: connection.sourceId, pageTargetId: connection.targetId, sourceText: connection.source.innerText, targetText: connection.target.innerText, }); });     }

文章来源: Can we export a JsPlumb flowchart as a JSON or XML?

标签

jsplumb