如何用保存的html从Gridstack构建网格 [英] How to build grid from Gridstack with saved html

问题描述

我一直在使用Gridstack动态创建网格。我已经使用以下函数来序列化网格及其数据。但我似乎无法弄清楚如何从它创建的JSON数组中构建我的网格和其内容。我检查了 https://github.com/troolee/gridstack.js#load -grid-from-array ，但添加内容部分是整个问题。

I've been using Gridstack for dynamically creating a grid. I have used the following function to serialize the grid and it's data. But I can't seem to figure out how to build my grid and its content from the JSON array it created. Ive checked https://github.com/troolee/gridstack.js#load-grid-from-array, but adding the content part is the whole problem.

function saveData() {
        var s_data = [];

        $('.grid-stack-item.ui-draggable').each(function () {
            var $this = $(this);

            s_data.push({
                x: $this.attr('data-gs-x'),
                y: $this.attr('data-gs-y'),
                w: $this.attr('data-gs-width'),
                h: $this.attr('data-gs-height'),
                content: $('.grid-stack-item-content', $this).html()
            });
        });         
    }

然后创建以下数组：

And that creates the following array:

[
    {"x":"0","y":"0","w":"4","h":"2","content":"<h1>Test title for content</h1>"},
    {"x":"4","y":"0","w":"4","h":"4","content":""}
];

所以我的问题是：如何使用此数组构建我的网格，包括其内容？ / p>

So my question is: how can I build my grid, including its content, using this array?

推荐答案

我回答了类似的问题 here。

I answered a similar question here.

在你的情况中，你可以在gridstack序列化示例提供的load函数中使用下面的代码：

In your case, you can use the following code in the load function provided by the gridstack serialization example:

this.load_grid = function () {              

    var items = GridStackUI.Utils.sort( this.s_data );
    this.grid.remove_all();

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

}.bind( this );

这篇关于如何用保存的html从Gridstack构建网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！