Gridster - Сохранение HTML-содержимого div для динамической загрузки сетки.
Я сделал несколько тестов с помощью гридстера и могу сохранить некоторые данные гридстера, такие как координаты, размер, идентификаторы и т. д.
Но я не могу сохранить содержимое элементов div, которые заполняют гридстер, так, чтобы их можно было загрузить позже вместе с координатами гридстера для каждого элемента.
Вот мой код:
<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, чтобы динамически воссоздать позже.
Может кто-нибудь мне помочь?
Спасибо
1 ответ
При выполнении serialize_params также захватывайте содержимое html. Вот простой пример, показывающий то же самое.
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, вам придется создать структуру. А затем вызвать метод гридстера.