2013-09-23 32 views
5

Tôi đã thực hiện một số thử nghiệm với gridster và tôi có thể lưu một số dữ liệu lưới, như coords, size, ids, v.v.Gridster - Lưu nội dung html của div để tải lưới động

Nhưng tôi không thể lưu nội dung của các divs cư trú gridster theo một cách tôi có thể tải sau này cùng với coords gridster cho mỗi phần tử.

Đây là mã của tôi:

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

Đây process.php tôi:

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

tôi có thể trích xuất tất cả nhưng nội dung html của div đó để tái tạo tự động sau này.

Có ai có thể giúp tôi không?

Cảm ơn bạn

Trả lời

7

khi thực hiện serialize_params, hãy nắm bắt nội dung html. Dưới đây là một số simple example hiển thị giống nhau.

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

Khi bạn lặp qua JSON, bạn sẽ phải tạo cấu trúc. Và sau đó gọi phương thức gridster.