Javascript 如何使用保存的html从Gridstack构建网格

我一直在使用Gridstack动态创建网格。我使用了以下函数来序列化网格及其数据。但是我似乎不知道如何从它创建的JSON数组中构建我的网格和它的内容。我检查过了，但添加内容部分才是问题的症结所在

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()
            });
        });         
    }

这将创建以下数组：

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

[
{“x”：“0”，“y”：“0”，“w”：“4”，“h”：“2”，“内容”：“内容的测试标题”}，
{“x”：“4”，“y”：“0”，“w”：“4”，“h”：“4”，“内容”：“}
];

---

所以我的问题是：如何使用这个数组构建我的网格，包括它的内容？

我回答了一个类似的问题

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

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

this.load\u grid=function（）{
var items=GridStackUI.Utils.sort（this.s_数据）；
此.grid.remove_all（）；
_.每个（项目、功能（节点）{
这个.grid.add_小部件（jQuery（“”+node.content+“”）、node.x、node.y、node.width、node.height）；
}，这个）；
}.约束（本）；

只需在正确的位置添加node.content即可。解决了！@你能详细说明你的解决办法吗？