我可以将 JSON 应用于当前的 gridster 列表吗？答案

【问题标题】：Can i apply JSON to current gridster list?我可以将 JSON 应用于当前的 gridster 列表吗？
【发布时间】：2020-01-12 23:57:05
【问题描述】：

我有一个从服务器获取的已生成数据的列表。（我在li 内部生成了一些小部件）

<div class='gridster'>
<ul>
<li>data item 1</li>
<li>data item 2</li>
<li>data item 3</li>
</ul>
</div>

以我的 JSON 为例：

[{"col":1,"row":1,"size_x":3,"size_y":2},{"col":4,"row":1,"size_x":3,"size_y":2},{"col":1,"row":3,"size_x":6,"size_y":2}]

在 gridster 演示中，我们使用此代码从 JSON 应用大小和位置

$('.js-seralize').on('click', function () {
    gridster.remove_all_widgets();
    $.each(serialization, function () {
        gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
    });
});

在这种情况下，我们使用gridster.remove_all_widgets();，这对我来说是个问题，我需要将我的数据项保存在某个地方，然后将它们输出回来。

在不使用remove_all_widgets() 函数的情况下，将 JSON 应用于当前列表的最佳解决方案是什么？

UPD：我从 asp mvc 应用程序生成我的列表，我想在客户端添加大小和位置列表。对我来说它看起来像：$('gridster ul').apply(jsonString);

【问题讨论】：

不清楚您所说的“将我的数据项保存在某处”是什么意思 - 如果您不删除然后继续添加，您也可以读取列表中已经存在的项目，不是吗？
已编辑帖子，观看更新部分，也许会让事情变得更清楚。

标签： javascript jquery json gridster

【解决方案1】：

要将 JSON 应用于已经存在的列表，我使用了以下代码：

 var CurrentGridState = `[{"col":1,"row":3,"size_x":3,"size_y":2},{"col":4,"row":3,"size_x":3,"size_y":2},{"col":1,"row":1,"size_x":6,"size_y":2}]`;


 $(function () { //DOM Ready
        var json = JSON.parse(CurrentGridState);
        $.each($('.gridster ul li'), function (item, value) {
            console.log(json[item]['col']);
            $(value).attr("data-col",json[item]['col']);
            $(value).attr("data-row",json[item]['row']);
            $(value).attr("data-sizex",json[item]['size_x']);
            $(value).attr("data-sizey",json[item]['size_y']);
        });

    $(window).trigger('resize');
       gridster =  $(".gridster ul").gridster({
            widget_margins: [10, 10],
           widget_base_dimensions: [140, 140],
           max_cols: 10,
           max_rows: 25,
            draggable: {
                stop: function (e, ui, $widget) {
                    //alert('drag!');
                }
            },
            resize: {
                stop: function (e, ui, $widget) {
                    $(window).trigger('resize');
                    serializeCurrentState();
                },
                enabled: true
            },
        }).data('gridster');
    });

【讨论】：