我该如何解析gridstack.js项目？

也许这很简单，但我还在学习JS和东西。 我正在使用插件https://github.com/troolee/gridstack.js，并希望每当窗口小部件重新定位/resize时发送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); });