我已经创建了一个 JSPlumb 流程图。现在，我想将这个流程图导出到它对应的JSON或XML脚本中，以保存并执行各种操作。什么更兼容？他们中的任何一个都很好。请赐教。我开发的 JsPlumb 代码(在各种网站的帮助下)如下所示。
<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>
非常感谢。
最佳答案
要首先将 jsPlumb 流程图导出到 JSON/XML，您需要收集有关流程图元素的信息，然后将其序列化。
枚举 block
要获取有关 block 的信息，您可以使用纯 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)
});
});
枚举连接
要获取有关元素之间连接的信息，您可以使用 jsPlumb API ，特别是“jsPlumb.getConnections()”方法:
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
序列化为 JSON
收集完所有流程图数据后，您可以将其序列化为 JSON:
var serializedData = JSON.stringify(blocks);
关于xml - 我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17607438/