Question

我现在正在使用Gridstack.js并且它对我有好处，但是（总有一个但是）有人知道我如何定位网格堆栈项定义一个JSON数组？

示例HTML

<div class="grid-stack">
    <div id="1" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
    <div id="2" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
    <div id="3" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
</div>

我的JSON

 [{"widgetId":"1","x":0,"y":2,"width":3,"height":4},{"widgetId":"2","x":1,"y":6,"width":3,"height":1},{"widgetId":"3","x":0,"y":7,"width":3,"height":4}]

我在文档中找不到任何相关内容。而且我担心我不可能。

Answer 1

我也有一个可怕的头痛，弄清楚如何使这成为可能。我从jQuery帖子中获取我的网格数据，该帖子返回JSON数据并构建te位置数组。在你的情况下，这可能是：

    var seri_data = [];
    this.serialized_data = seri_data;

    jQuery.post( 'yourfile.php', function( data ) {

        jQuery.each( data, function( key, value ) {

            seri_data.push({
                'id'        : this.widgetId,
                 'x'        : this.x,
                 'y'        : this.y,
                 'width'    : this.width,
                 'height'   : this.height,
             });

         });

     });

使用下面的代码，它是gridstack序列化演示示例的基础，可以找到here。打开该页面的源代码并查看加载功能部分...使用下面提供的代码更改其代码。

 _.each( items, function( node ) { this.grid.add_widget( jQuery( '<div data-gs-id="widget_' + node.id + '" class="grid-stack-item"><div class="grid-stack-item-content"></div></div>' ), node.x, node.y, node.width, node.height ); }, this );

Gridstack.js从JSON获得位置

1 个答案: