javascript - 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

我也非常头痛如何实现这一点。我从 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 );