Блог

У меня есть проект gridstack, над которым я работаю, и я могу вручную добавлять виджеты с другим контентом. Я могу расположить их так, как я хочу, а затем сохранить макет. Я могу в любое время загрузить макет обратно в последнюю точку сохранения. Вот пример этого:https://jsfiddle.net/m9rvcsu1 /

Моя проблема в том, что когда я загружаю макет, координаты и размер правильные, но содержимое виджетов неправильное. Все содержимое виджета возвращается к виджету по умолчанию.

Я считаю, что моя проблема вызвана этой строкой: myGrid.load(JSON.parse($('#tile-placement-string').val()), '#default-tile');

Итак, чтобы исправить это, я полагаю, мне нужно загрузить идентификатор каждого виджета в мою строку json, которую я использую для сохранения / загрузки позиций? Как я могу сделать это правильно?

Вот как выглядит мой json: [{«x»:0,»y»:0,»width»:2,»height»:2},{«x»:2,»y»:0,»width»:2,»height»:2},{«x»:4,»y»:0,»width»:2,»height»:2}]

Это моя функция сохранения и функция click, которая ее вызывает:

 function save() {
    return $.makeArray($(id   ' > .grid-stack-item:visible')).map(function (v) {
        var n = $(v).data('_gridstack_node');
        return n ? { x: n.x, y: n.y, width: n.width, height: n.height } : null; //add in ability to store tile id for content loading
    });
}

$('#save-grid').click(function () {
    $('#tile-placement-string').val(JSON.stringify(myGrid.save())); //save tile coordinates as json
});
  

И вот как я загружаю данные:

 function load(data, defaultTile) {
    gridObj.removeAll();
    $.each(data, function (k, v) { addTile(defaultTile, v.x, v.y, v.width, v.height); });
}

$('#load-grid').click(function () {
    myGrid.load(JSON.parse($('#tile-placement-string').val()), '#default-tile'); //load tile coordinates from json string
});
  

Больше контекста можно найти в моей скрипке.

Чтобы воспроизвести проблему:

Нажмите Редактировать пользовательский интерфейс, затем щелкните диаграмму 1, затем щелкните диаграмму 2

Нажмите Редактировать пользовательский интерфейс, затем нажмите Сохранить

Нажмите Редактировать пользовательский интерфейс, затем нажмите Загрузить (обратите внимание, что все содержимое плиток было изменено на плитку по умолчанию)

Любая помощь приветствуется!

Прежде всего, давайте установим data-gs-id атрибут в соответствии с документами в addTile методе:

 gridObj.addWidget(tile, x, y, w, h, null, null, null, null, null, defaultTile);
  

Затем давайте прочитаем и сохраним это в save методе:

 var gsId = $(v).data('gs-id');
return n ? { x: n.x, y: n.y, width: n.width, height: n.height, id: gsId } : null;
  

Наконец, давайте используем его для загрузки в load метод:

 $.each(data, function (k, v) { addTile(v.gsId || defaultTile, v.x, v.y, v.width, v.height); });