我可以将 JSON 应用到当前的 gridster 列表吗？

Question

我有一个从服务器获得的已生成数据的列表。（我在里面生成了一些小部件 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);

Answer 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');
    });

我可以将 JSON 应用到当前的 gridster 列表吗？

Can i apply JSON to current gridster list?

javascript

jquery

json

gridster