Gridstack.js从JSON获取位置 [英] Gridstack.js get positions from JSON

问题描述

我现在正在使用 Gridstack.js ，它对我有好处，但是(总是一个，但是)有人知道我如何定位JSON数组中定义的grid-stack-item吗?

I'm working now with Gridstack.js and it's good for me, but (there is always a but) does someone knows how i can position the grid-stack-item as defined in a JSON array?

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

我在文档中找不到关于此的任何内容.而且我恐怕不可能.

I can not find anything about that in the documentation. And i am afraid i is not possible.

推荐答案

我也很头疼，想出如何使之成为可能.我从jQuery帖子中获取网格数据，该帖子返回JSON数据并构建te positions数组.在您的情况下，可能是:

I also had a terrible headache figuring out how to make this possible. I get my grid data from a jQuery post which returns JSON data and builds te positions array. In your case this could be:

    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序列化演示示例的基础，可以找到

Use the code below, it's the base of the gridstack serialization demo example which can be found here. Open that page's source and look at the load function part... Change it's code with the code provided below.

 _.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获取位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！