Gridster - 保存 div 的 html 内容以动态加载网格答案

【问题标题】：Gridster - Save html content of divs to load grid dynamicallyGridster - 保存 div 的 html 内容以动态加载网格
【发布时间】：2013-09-23 23:10:56
【问题描述】：

我已经用 gridster 做了一些测试，我可以保存一些 gridster 数据，比如坐标、大小、ID 等。

但是我无法保存填充 gridster 的 div 的内容，我可以稍后加载每个元素的 gridster 坐标。

这是我的代码：

<script type="text/javascript">
    $(document).ready(function () {
    var grid_canvas = $("#homepage > #grid").gridster({
         widget_margins: [10, 10],
         widget_base_dimensions: [140, 140],
        widget_selector: ".gs_w",
            shift_larger_widgets_down: false,
    serialize_params: function($w, wgd) {
    return {
    id: $($w).attr('id'),
    col: wgd.col, 
    row: wgd.row,
    size_x: wgd.size_x,
    size_y: wgd.size_y,

    };
    },
    draggable: {

    stop: function(event, ui) {

    var positions = JSON.stringify(this.serialize());

    $.post(
    "process.php",
    {portlets: positions},
    function(data){
        var resultado = jQuery.parseJSON(data);
        $("#result").html(resultado)
            }
    );
    }
    }
            }).data('gridster');
        });
    </script>
</head>
<body>
    <div id="homepage">
      <div id="grid" style="height: 480px; position: relative; width:480px; ">
        <div id="protlet-1" data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"><div>Test-one</div></div>        
      </div>
    </div>
    <div id="result"></div>

这里是我的 process.php：

<?php echo $_POST["portlets"];?>

我可以提取除 html 之外的所有 div 内容，以便稍后动态重新创建。

谁能帮帮我？

谢谢

【问题讨论】：

标签： javascript jquery gridster

【解决方案1】：

在执行 serialize_params 时，也要捕获 html 内容。这是一个simple example 显示相同的内容。

serialize_params: function($w, wgd) 
{ 
    return { 
           id: $($w).attr('id'), 
           col: wgd.col, 
           row: wgd.row, 
           size_x: wgd.size_x, 
           size_y: wgd.size_y, 
           htmlContent : $($w).html() 
         };
}

当您遍历 JSON 时，您必须构建结构。然后调用gridster方法。

【讨论】：