4

Gridster jQuery プラグインを使い始めたばかりですが、gridster.serialize() の使用に問題があります。このサイトによると、JSON 文字列としてエンコードできるように、すべてのウィジェットの位置を含むオブジェクトの JavaScript 配列を作成することになっています。

私はいくつかの基本的なコードを持っています:

        $(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() 関数がどのように機能すると想定されているかは、私には完全には明らかではありません。グリッド内のすべてのタイルの現在のサイズ/位置を記録し、それを何らかの配列に入れようとしています。誰にもアイデアはありますか？

編集:サイトはこちらです。

4

1 に答える 1

16

とった。

        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())
        });
于 2013-10-17T16:38:22.400 に答える