我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？答案

【问题标题】：Can we export a JsPlumb flowchart as a JSON or XML?我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？
【发布时间】：2013-07-12 04:27:35
【问题描述】：

我创建了一个 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>

非常感谢。

【问题讨论】：

标签： xml json jsplumb

【解决方案1】：

要将 jsPlumb 流程图导出为 JSON / XML，首先您需要收集有关流程图元素的信息，然后对其进行序列化。

枚举块

要获取有关块的信息，您可以使用纯 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);

【讨论】：

非常感谢您的详细解释。我会执行此操作并通知您。
我无法获得连接。我正在使用 Jsplumb 状态机。我可以序列化盒子，但连接对象为空。有什么帮助吗？

【解决方案2】：

我们可以使用 GetAllConnections 来代替 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,
});
});    
}

【讨论】：