网格堆栈.js从 JSON 获取位置

Gridstack.js get positions from JSON

本文关键字：获取 位置 JSON 堆栈 js 网格      更新时间：2023-09-26

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

示例网页 

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

我的杰伦

 [{"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}]

我在文档中找不到任何相关信息。而且恐怕我是不可能的。

我也非常头疼，想知道如何使这成为可能。我从一个jQuery帖子中获取我的网格数据，该帖子返回JSON数据并构建位置数组。在您的情况下，这可能是：

    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 );
相关文章：