Javascript Gridster-保存div的html内容以动态加载网格
我用gridster做了一些测试，我可以保存一些gridster数据，比如坐标、大小、ID等 但我无法保存填充gridster的div的内容，我可以稍后将其与每个元素的gridster坐标一起加载 这是我的密码：Javascript Gridster-保存div的html内容以动态加载网格,javascript,jquery,gridster,Javascript,Jquery,Gridster,我用gridster做了一些测试，我可以保存一些gridster数据，比如坐标、大小、ID等 但我无法保存填充gridster的div的内容，我可以稍后将其与每个元素的gridster坐标一起加载 这是我的密码： <script type="text/javascript"> $(document).ready(function () { var grid_canvas = $("#homepage > #grid").gridster({ w
<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>
$（文档）.ready（函数（）{
var grid_canvas=$（“#主页>#网格”）.gridster({
小部件_边距：[10,10]，
小部件基础尺寸：[140140]，
小部件选择器：“.gs\u w”，
按住shift键：false，
序列化参数：函数（$w，wgd）{
返回{
id:$（$w）.attr（'id'），
col:wgd.col，
行：wgd.row，
尺寸×wgd.size×，
尺寸y:wgd.size_y，
};
},
可拖动：{
停止：功能（事件、用户界面）{
var positions=JSON.stringify（this.serialize（））；
美元邮政(
“process.php”，
{portlet:positions}，
功能（数据）{
var resultado=jQuery.parseJSON（数据）；
$（“#result”）.html（resultado）
}
);
}
}
}).数据（“gridster”）；
});
测试一
<?php echo $_POST["portlets"];?>
感谢您在执行序列化参数时，也要捕获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()
};
}