Загрузка идентификаторов Gridstack из JSON - PullRequest
Новая
       22

Загрузка идентификаторов Gridstack из JSON

0 голосов
/ 03 апреля 2019

У меня есть проект гридстака, над которым я работаю, и который я могу вручную добавлять виджеты с другим содержимым.Я могу выложить их, как я хочу, а затем сохранить макет.Я могу загрузить макет обратно в последнюю точку сохранения в любое время.Вот скрипка: 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, "ширина": 2, "высота": 2}, {"x": 4, "y": 0, "ширина": 2, "высота": 2}]

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

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

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

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

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

1 Ответ

2 голосов
/ 03 апреля 2019

Прежде всего, давайте установим атрибут 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); });
...