如何解析gridstack.js项？

Question

也许这很简单，但我仍然在学习JS之类的东西。我正在使用插件https://github.com/troolee/gridstack.js，希望在小部件重新定位/调整大小时发送ajax请求。我写了这个(根据官方自述)：

var serialize_widget_map = function (items) {
        console.log(items);
    };

    // onchange position/size
    $('.grid-stack').on('change', function (e, items) {
        console.log(items);
    });

只是为了看看控制台上写着什么: Object，Object --也许是因为我在页面上有两个小部件，但是我必须注意到这个数量可能会有所不同(可以动态地删除/添加小部件)。

我如何“解析”这个“项”的事情，以便我可以访问小部件的属性？

Answer 1

万一有人在找这个问题的答案，我已经解决了这个问题：

$('.grid-stack').on('change', function (e, items) {
    var widgets = [];

    for (i = 0; i < items.length; i++) {
        var widgetsObj = {
            'widgetId': items[i].el.context.id,
            'x': items[i].x,
            'y': items[i].y,
            'width': items[i].width,
            'height': items[i].height
        }
        widgets.push(widgetsObj);
    }
}

因为items变量可能包含多个对象，所以我循环遍历它来创建一个具有我需要的属性的对象数组。

Answer 2

我提出您的问题是因为我正在寻找一种检索当前项/节点的方法。

我找到了这个解决方案，其中不需要事件。

grid = $('.grid-stack').data('gridstack');
items = grid.grid.nodes;

Answer 3

var serialize_widget_map = function (items) {
    console.log(items);
};

$('.grid-stack').on('change', function (e, items) {
    var widgets = [];

    for (var i = 0; i < items.length; i++) {
        var widgetsObj = {
            'widgetId': items[i],
            'x': items[i].x,
            'y': items[i].y,
            'width': items[i].width,
            'height': items[i].height
        }
    }
    serialize_widget_map(widgetsObj);
});