在jsPlumb上保存并加载流程图

Question

在jsPlumb上保存和加载流程图的最佳方法是什么？

Answer 1

我设法通过简单地将所有元素放在一个对象数组中来保存图表,其中每个对象都有源节点和目标节点,x,y坐标.

保存时,只需执行JSON.stringify(whole_object),如果加载,只需简单地JSON.parse()手动定位节点并连接它们.

Answer 2

我的解决方案保存并加载jsPlumb:

function Save() {
    $(".node").resizable("destroy");
    Objs = [];
    $('.node').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);
}


function Load() {
    var s="";
    for(var i in Objs) {
        var o = Objs[i];
        console.log(o);
        s+='<div id="'+ o.id+'" class="node" style="left:'+ o.left+'; top:'+ o.top+'; width:'+ o.width +'; height:'+ o.height +' "> '+ o.html+'</div>';
    }
    $('#main').html(s);
}

UPD演示:http://jsfiddle.net/Rra6Y/137/

注意:如果demo在JsFiddle中不起作用,请确保它指向现有的jsPlumb链接(链接列在"外部资源"JsFiddle菜单项中