2013-09-23 6 views
5

zrobiłem kilka testów z gridster i mogę zapisać jakieś dane gridster, jak coords, wielkość, identyfikatory itpGridster - zapisywanie zawartości HTML div załadować siatkę dynamicznie

ale jestem unnable zapisać zawartość z div, które zapełniają gridster w taki sposób, że mogę załadować później wraz z gridster coords dla każdego elementu.

Oto mój kod:

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

Oto moja process.php:

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

mogę wydobyć wszystko, ale zawartość html tego div dynamicznie odtworzyć później.

Czy ktoś może mi pomóc?

Dziękuję

Odpowiedz

7

robiąc serialize_params, przechwytywanie zawartości HTML, jak również. Oto simple example pokazujący to samo.

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

Podczas iteracji nad JSON, będziesz musiał zbudować strukturę. A następnie wywołaj metodę gridster.

Powiązane problemy