javascript - 不确定如何将 gridster.serialize() 与 Gridster jQuery 插件一起使用

Question

我刚开始使用 Gridster jQuery 插件，但在使用时遇到了问题gridster.序列化()。根据该网站，它应该创建一个 JavaScript 对象数组，其中包含所有小部件的位置，准备好编码为 JSON 字符串。

我只有一些基本代码:

        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140]
            });
        });

与相应的 HTML:

    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">1</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">2</li>
        <li data-row="2" data-col="2" data-sizex="3" data-sizey="2">2</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">3</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">3</li>
        </ul>
    </div>

而且我并不完全清楚 gridster.serialize() 函数应该如何工作。我只是想记录我网格中所有图 block 的当前大小/位置，并将其放入某种数组中。有人有什么想法吗？

编辑:这是 site .

Answer 1

明白了。

        var gridster = $(".gridster ul").gridster().data('gridster');
        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140],
                serialize_params: function($w, wgd) { 
                    return { 
                           id: $w.attr('id'), 
                           col: wgd.col, 
                           row: wgd.row, 
                           size_x: wgd.size_x, 
                           size_y: wgd.size_y 
                    };
                }
            })
            var gridster = $(".gridster ul").gridster().data('gridster');
            gridData = gridster.serialize();
            alert(gridData.toSource())
        });