时间戳

首页 > 解决方案 > 从 JSON 加载 Gridstack ID

javascript - 从 JSON 加载 Gridstack ID

问题描述

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

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

我相信我的问题是由这条线引起的： myGrid.load(JSON.parse($('#tile-placement-string').val()), '#default-tile');

所以要解决这个问题，我想我需要将每个小部件的 id 加载到我用来保存/加载位置的 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
});

更多上下文可以在我的小提琴中找到。

要重现问题：

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

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

点击 Edit UI，然后点击 Load（注意所有的 tile 内容都已更改为默认 tile）

任何帮助表示赞赏！

标签： javascriptjqueryjsongridstack

解决方案

首先，让我们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); });

推荐阅读