Диаграмма JSPlumb в JSON

Я разрабатывал инструмент для построения диаграмм, я использовал JSPlumb.

Я сделал формы, используя CSS, а соединения сделаны через JSplumb.

Мне нужно сохранить диаграмму в формате JSON или XML. Но мне тяжело.

Например, это функция для сохранения диаграммы

$(function save() {
        //$("#editor").resizable("destroy");
        Objs = [];
        $('#editor').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);

    });

Кроме того, я пробовал stringify для получения данных и анализа для загрузки, но я все еще не могу понять это.

Есть ли способ, которым я могу сохранить jsplumb в json или xml?

Источник

2 ответа

Решение

Всякий раз, когда соединение установлено, инициируется событие " соединение". Вам необходимо сохранить сведения о конечных точках соединения в этой запущенной функции, чтобы вы могли получить их позже.

Сначала убедитесь, что вы установили правильный идентификатор для своих конечных точек. Вы можете вручную установить время создания конечной точки как:

var e0 = jsPlumb.addEndpoint("div1",{uuid:"div1_ep1"}),  // You can also set uuid based on element it is placed on
 e1 = jsPlumb.addEndpoint("div2",{uuid:"div2_ep1"});

Теперь свяжите событие подключения, где вы будете хранить информацию об установленных подключениях:

var uuid, index=0; // Array to store the endpoint sets.
jsPlumb.bind("connection", function(ci) {
    var eps = ci.connection.endpoints;
    console.log(eps[0].getUuid() +"->"+ eps[1].getUuid()); // store this information in 2d-Array or any other format you wish
    uuid[index][0]=eps[0].getUuid(); // source endpoint id
    uuid[index++][1]=eps[1].getUuid(); // target endpoint id
    }
});

Вы можете преобразовать информацию массива в формат JSON и сохранить ее. При восстановлении подключите конечные точки на основе uuid. код:

jsPlumb.connect({ uuids:["div1_ep1","div2_ep1"] });

Вот jsFiddle для создания соединений на основе конечных точек.

ПРИМЕЧАНИЕ. Приведенный выше код предназначен только для восстановления информации о соединении и конечных точках после восстановления CSS. Вы можете сохранить свойства css всех элементов div, используя тот же метод, который вы написали в своем вопросе.

Источник

Я только недавно связал это и его работу

function createJSON(){
        var data = new Object();
        $("input[class = process]").each(function(){
            data[$(this).attr("name")] = $(this).val();

        jsonString = JSON.stringify(data);


    });

        console.log(jsonString);

    }
Источник
Другие вопросы по тегам