我該如何解析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);
    });

只是看看控制台說的是什么：[對象，對象] - 也許是因為我在頁面上有2個小部件，但我必須注意到這個數量可能會有所不同（小部件可能被動態刪除/添加）。

如何“解析”這個“項目”的東西，以便我可以訪問小部件的屬性？

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