2013-09-23 17 views
5

Ho fatto qualche prova con gridster e posso salvare alcuni dati gridster, come coordinate, dimensioni, ecc idsGridster - Salva contenuto HTML di div per caricare dinamicamente griglia

ma io sono unnable per salvare contenuti dei div che popolano il gridster in un modo che posso caricare in un secondo momento insieme alle corde di rinforzo per ciascun elemento.

Ecco il mio codice:

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

Qui il mio process.php:

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

posso estrarre tutti, ma i contenuti html di quella div di ricreare in modo dinamico in seguito.

Qualcuno può aiutarmi?

Grazie

risposta

7

quando si fa serialize_params, catturare il contenuto HTML pure. Ecco uno simple example che mostra lo stesso.

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

Quando si esegue l'iterazione sul JSON, sarà necessario costruire la struttura. E poi invoca il metodo di rotazione.

Problemi correlati