Question

我一直在开发图表工具，我使用了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？

Answer 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"});

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

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属性。

Answer 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);

    }

JSPlumb图表到JSON

2 个答案: