All geek questions in one place

Can we export the JsPlumb flowchart as JSON or XML?

I created a JSPlumb flowchart. Now I want to export this flowchart to the appropriate JSON or XML script to save and perform various operations. Which is more compatible? Any one of them works great. Please enlighten me about this. The JsPlumb code I developed (through various sites) is 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>

Thank you very much in advance.

+6
source share
2 answers

To export the jsPlumb flowchart to JSON / XML, you first need to collect information about the flowchart elements and then serialize it.

Block enumeration

To get information about blocks, you can use simple 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) }); });

Enumeration of connections

To get information about connections between elements, you can use the jsPlumb API , in particular the jsPlumb.getConnections () method:

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

Serialization for JSON

Once you have collected all the data in the flowchart, you can serialize it to JSON:

 var serializedData = JSON.stringify(blocks);
+16
source

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, }); }); }
0
source

Source: https://habr.com/ru/post/949281/

More articles:


All Articles