JSPlumb 图转 JSON答案

【问题标题】：JSPlumb diagram to JSONJSPlumb 图转 JSON
【发布时间】：2014-08-20 07:02:35
【问题描述】：

我一直在开发一个图表工具，我使用了 JSPlumb。

我使用 css 制作形状，并通过 JSplumb 制作连接。

我需要将图表保存为 json 或 xml 格式。但我很难过。

例如，这是保存图表的功能

$(function save() {
        //$("#editor").resizable("destroy");
        Objs = [];
        $('#editor').each(function(){
            Objs.push({id:$(this).attr('id'), html:$(this).html(), left:$(this).css('left'), top:$(this).css('top'), width:$(this).css('width'), height:$(this).css('height')});
        });
        console.log(Objs);

    });

另外，我一直在尝试使用 stringify 来获取数据并解析以进行加载，但我仍然无法弄清楚。

有没有办法可以将 jsplumb 保存为 json 或 xml？

【问题讨论】：

在您的场景中，是每个连接都有单独的端点还是单个端点可以有多个连接？
在我的场景中，单个端点可以有多个连接。

标签： javascript jquery css json jsplumb

【解决方案1】：

只要建立连接，就会触发“connection”事件。您需要将连接端点的详细信息存储在该触发函数中，以便以后检索它们。

首先确保您为端点设置了正确的 id。您可以在端点创建时手动设置为：

var e0 = jsPlumb.addEndpoint("div1",{uuid:"div1_ep1"}),  // You can also set uuid based on element it is placed on
 e1 = jsPlumb.addEndpoint("div2",{uuid:"div2_ep1"});

现在绑定 connection 事件，您将在其中存储已建立的连接信息：

var uuid, index=0; // Array to store the endpoint sets.
jsPlumb.bind("connection", function(ci) {
    var eps = ci.connection.endpoints;
    console.log(eps[0].getUuid() +"->"+ eps[1].getUuid()); // store this information in 2d-Array or any other format you wish
    uuid[index][0]=eps[0].getUuid(); // source endpoint id
    uuid[index++][1]=eps[1].getUuid(); // target endpoint id
    }
});

您可以将数组信息转换为 JSON 格式并存储。恢复时，根据 uuid 连接端点。代码：

jsPlumb.connect({ uuids:["div1_ep1","div2_ep1"] });

这是基于端点建立连接的jsFiddle。

注意： 以上代码仅用于在您恢复 div 的 css 后恢复连接和端点信息。您可以使用您在问题中编写的相同方法存储所有 div 的 css 属性。

【讨论】：

【解决方案2】：

我最近刚刚绑定了这个和它的工作

function createJSON(){
        var data = new Object();
        $("input[class = process]").each(function(){
            data[$(this).attr("name")] = $(this).val();

        jsonString = JSON.stringify(data);


    });

        console.log(jsonString);

    }

【讨论】：