Question

我有以下使用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>

Answer 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年前！），或者是其他偶然发现此线程的人。

保存并加载Jsplumb图表

1 个答案: