保存和加载 Jsplumb 图表答案

【问题标题】：Save and Load Jsplumb chart保存和加载 Jsplumb 图表
【发布时间】：2014-09-07 11:46:11
【问题描述】：

我有以下代码使用 JsPlumb 创建图表。我需要保存图表，然后使用其确切的节点和连接重新加载它。请问有什么帮助吗？代码是使用 JsPlumb 连接可拖动元素。

<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script> 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script>

    $(function () {

        //Make element draggable
        $(".dragItem").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            revert: true
        });
        $("#DropArea").droppable({
            accept: '.dragItem',
            activeClass: "drop-area",
            drop: function (e, ui) {

                x = ui.helper.clone();
                ui.helper.remove();
                $(x).removeAttr("class");

                $(x).addClass("dropItem"); 
                x.addClass('jsPlumbItem');
                x.appendTo('#DropArea');

                 AddLine();

            }
        });
    })

    function AddLine()
    {
        jsPlumb.removeAllEndpoints();
        var j = 1;
        var previous; 

        $("#DropArea").find(".jsPlumbItem").each(function () {

            if (j > 1)
            {
                var e0 = jsPlumb.addEndpoint(previous);
                var e1 = jsPlumb.addEndpoint($(this)); 
                 //add line
                jsPlumb.connect({ source: e0, target: e1 });
            }
            else
            {
                j++;
            }
            previous = $(this);

        }); 

        jsPlumb.draggable($(".jsPlumbItem"));

    }


</script>
</head>
<body>
<form id="form1" runat="server">
    <style>
        .dragItem 
        {
            width:50px;
            height:50px;
            background-color:blue;
            float:left; 
        }
        .dropItem 
        {
            width:50px;
            height:50px;
            background-color:red;
            float:left;  
            position:relative;
        }
    </style>
<div>
 <div id="container" style="width:60px; height:400px;">
     <div id="Item1" class="dragItem">A</div>
     <div id="Item2" class="dragItem">B</div>
     <div id="Item3" class="dragItem">C</div>
 </div>
    <div id="DropArea" style="width: 400px; height:400px; border:solid 1px gray; "></div>
</div>
</form>
</body>

【问题讨论】：

这是更新后的小提琴：jsfiddle.net/t3nbL/49来自这篇文章stackoverflow.com/a/20893737/2905527
请帮助我了解我的代码
github.com/nitinsurana/jsPlumb-Persistence

标签： javascript jquery jsplumb

【解决方案1】：

这将在同一位置重新创建确切的元素（包括任何嵌套元素），它们的连接将被重新创建，并且它们将是可拖动的。

概述：您需要序列化元素和连接，将其保存在某处（您的选择），然后在重新加载时反序列化。

创建几个按钮，将它们命名为 btnSave 和 btnLoad，然后添加下面的代码。

注意，下面我指的是 jsPlumb 的一个实例（例如 jp = jsPlumb）

保存代码：

$('#btnSave').on('click', function() {

    data = [];

    // Loop through elements (b is block)
    var b = []
    $("#DropArea .dragItem").each(function (idx, elem) {
        var $elem = $(elem);
        b.push({
            id: $elem.attr('id'),
            x: parseInt($elem.css("left"), 10),
            y: parseInt($elem.css("top"), 10),
            h: $elem.html()
        });
    });

    data.push({blk : b});

    // Loop through connections
    var c = [];
    $.each(jp.getConnections(), function (idx, connection) {
        c.push({
            i: connection.id,
            s: connection.sourceId,
            t: connection.targetId
        });
    });

    data.push({con : c});

    data = JSON.stringify(data);

    // Lastly, save the data somewhere (e.g. MySQL, etc.)

});

加载代码：

$('#btnLoad').on('click', function() {      

    // First, retrieve the data from storage (e.g. MySQL, etc.)

    data = JSON.parse(data);                        
    var blk = data[0].blk;
    var con = data[1].con;

    for( var i = 0; i < blk.length; i++ ) {             
        addWidget(blk[i]['id'],blk[i]['x'],blk[i]['y'], blk[i]['h']);           
    }

    for( var i = 0; i < con.length; i++ ) {

        var connection = jp.connect({ source: con[i]['s'], target: con[i]['t'] });

        // Allows user to click to remove connection
        connection.bind("click", function(conn) {
            jp.deleteConnection(conn);
        });
    }

    // Make the loaded elements draggable again
    jp.draggable( $('.dragItem') );
});

我希望这对你有帮助（可能不是因为这是 5 年前的事了！）或者其他碰巧偶然发现这个话题的人。

【讨论】：

嗨，你能检查一下这个stackoverflow.com/questions/56913843/…