jsPlumbでフローチャートを保存およびロードするための最良の方法は何ですか?
5 に答える
オブジェクトの配列内にすべての要素を配置するだけでチャートを保存できました。各オブジェクトにはソースノードとターゲット ノード x, y 座標があります。
保存する場合は を実行しJSON.stringify(whole_object)
、ロードする場合JSON.parse()
はノードを手動で配置して接続します。
私のソリューションは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/
注: デモが JsFiddle で機能しない場合は、既存の jsPlumb リンクを指していることを確認してください (リンクは「外部リソース」JsFiddle メニュー項目にリストされています)。
YUIを使用しています。接続されている各ボックスアイテムの位置をテーブルに保存しています。jsPlumbが描画する線を決定するために使用される、アイテム間の親子関係を格納する別のテーブルがあります。これは、最初に選択されたアイテムが親であり、他のすべてのアイテムが子である選択プロセスを使用して決定します。「接続」ボタンをクリックすると、アイテムの親子選択がクリアされます。選択した親をクリックすると、これも切り替えます。子の選択もクリアされます。
私は最近、jsPlumb に保存機能がない理由 (および私が推奨すること) について、次のブログ記事を書きました。
http://jsplumb.tumblr.com/post/11297005239/why-doesnt-jsplumb-offer-a-save-function
...多分誰かがそれが役に立つと思うでしょう。