不知道如何使用Gridster jQuery插件使用gridster.serialize()

Question

我刚刚开始使用Gridster jQuery插件,我在使用gridster.serialize()时遇到了麻烦.根据该网站,它应该创建一个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()函数是如何工作的.我只是想记录网格中所有图块的当前大小/位置,并将其放入某种数组中.有人有主意吗？

编辑:这是网站.

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