从 JSON 加载 Gridstack ID

Question

我有一个正在处理的 gridstack 项目，我可以手动添加具有不同内容的小部件。我可以按照自己的意愿布置它们，然后保存布局。我可以随时将布局加载回上次保存点。这是它的 fiddle： https://jsfiddle.net/m9rvcsu1/

我的问题是，当我加载布局时，坐标和大小是正确的，但是小部件的内容是错误的。所有小部件内容都设置回默认小部件。

我认为我的问题是由这一行引起的： myGrid.load(JSON.parse($('#tile-placement-string').val()), '#default-tile');

所以要解决这个问题，我想我需要将每个小部件的 ID 加载到我用于 save/load 位置的 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}]

这是我的保存函数，调用它的点击函数：

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
});

更多上下文可以在我的 fiddle 中找到。

重现问题：

单击编辑 UI，然后单击图表 1，然后单击图表 2

单击“编辑”UI，然后单击“保存”

单击“编辑”UI，然后单击“加载”（注意所有图块内容已更改为默认图块）

感谢任何帮助！

Answer 1

首先我们根据addTile方法中的docs设置data-gs-id属性：

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); });

从 JSON 加载 Gridstack ID

Loading Gridstack ID's from JSON

javascript

jquery

json

gridstack