Сохранить и загрузить диаграмму Jsplumb

У меня есть следующий код, который создает диаграмму с помощью 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>

javascript jquery jsplumb
person Carol    schedule 07.09.2014    source источник
comment
Вот обновленная скрипта: jsfiddle.net/t3nbL/49 из этого поста stackoverflow.com/a/20893737/2905527   -  person MrNobody007    schedule 08.09.2014
comment
пожалуйста, помогите мне с моим кодом   -  person Carol    schedule 14.09.2014
comment
github.com/nitinsurana/jsPlumb-Persistence   -  person coding_idiot    schedule 05.11.2014

Ответы (1)


arrow_upward
0
arrow_downward

Это позволит воссоздать точные элементы в том же месте (включая любые вложенные элементы), их соединения будут воссозданы, и их можно будет перетаскивать.

Обзор: вам нужно сериализовать элементы и соединения, сохранить их где-нибудь (на ваш выбор), а затем десериализовать их при загрузке обратно.

Создайте пару кнопок, назовите их 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 лет назад!) Или всем, кто случайно наткнется на эту тему.

person Mr L    schedule 17.01.2019
comment
Здравствуйте, можете ли вы проверить этот stackoverflow. ком/вопросы/56913843/ - person The Dead Man; 06.07.2019