Gridstack.js 從 JSON 獲取位置

Question

我現在正在使用Gridstack.js並且它對我有好處，但是（總是有一個但是）有人知道我如何定位 JSON 數組中定義的 grid-stack-item 嗎？

示例 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

我也很頭疼，想知道如何使這成為可能。 我從返回 JSON 數據並構建 te 位置數組的 jQuery 帖子中獲取我的網格數據。 在您的情況下，這可能是：

    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 序列化演示示例的基礎，可以在這里找到。 打開該頁面的源代碼並查看加載功能部分...使用下面提供的代碼更改其代碼。

 _.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 );