2013-09-23 79 views
5

我已經做了一些測試與gridster,我可以節省一些gridster數據,如COORDS,大小,IDS等Gridster - 保存的div的HTML內容加載動態網格

但我是unnable保存內容以某種方式填充gridster的divs,我可以隨後加載每個元素的gridster coords。

這裏是我的代碼:

<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"];?> 

我可以提取所有,但該div的HTML內容動態地重新創建以後。

任何人都可以幫助我嗎?

謝謝

回答

7

在做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方法。