我一直在开发图表工具,我使用了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?
答案 0 :(得分:2)
每当建立连接时,都会触发“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属性。
答案 1 :(得分:1)
我最近刚将这个及其工作结合起来
function createJSON(){
var data = new Object();
$("input[class = process]").each(function(){
data[$(this).attr("name")] = $(this).val();
jsonString = JSON.stringify(data);
});
console.log(jsonString);
}