解决办法:
1.将执行事件的代码放在生成dom的 function 里面
$.ajax({
url: "url", //json文件位置
// url: "serialization.json", //json文件位置
type: "post", //请求方式为get
//data: "{pareId:0}",
async: true,
contentType: "application/json",
dataType: "json", //返回数据格式为json
success: function(data) {
var serialization = data.d;
gridster = $(".gridster ul").gridster({
widget_selector: "li",
widget_base_dimensions: [200, 179],
widget_margins: [2.6, 4],
autogenerate_stylesheet: true,
resize: {
enabled: 'false', //允许放缩
handle: '.resize' //html标签的css类名,按住此标签可以对网格进行放缩
},
serialize_params: function($w, wgd) { //$w为要输出位置的网格对象(li),wgd为该网格对象的座标对象,包括col,row,size //_x,size_y四个成员
return {
id: $w.attr("id"),
x: wgd.col,
y: wgd.row,
sn: $w.find(".sn").text(),
name: '', //机器名字
location: '',
duty: $w.find(".duty").text(), //负责人
vender: '',
venderCncId: '',
spec: '',
productDT: '1900/1/1',
buyDT: '1900/1/1',
remark: '',
user: '',
percent: $w.find(".percent").text()
}
},
draggable: {
handle: 'li img', //模块内定义拖动的元素<header>,这里也支持jquery选择器,如"span.drag_handle",标识拖动的是<header>.
start: function(eent, ui) {
//alert('开始拖')
}, //开始拖触发的,从点击开始!
stop: function(eent, ui) { //结束拖动,从放下模块开始!
var s = gridster.serialize(); //$(selector).serialize()输出序列化表单的字符串,文件上传控件(例如:<input type="file" name="myfile"/>)类型的表单数据会被自动忽略,也就是说不会出现在序列化字符串中。
$.ajax({
type: "POST",
url: "url", //请求地址
async: true,
contentType: "application/json",
dataType: "json", //返回数据格式为json
data: "{strLocationJson:'" + JSON.stringify(s) + "'}",
success: function(data, status) {
console.log("success!")
} //必须设置为同步模式,即回调函数执行完毕后才向下执行(unload页面)
}); //也可以从start里面开始拖的时候显示个提交的框框, 拖完了点击提交后进行ajax请求数据库!
}
}, //设置serialize()方法的返回值
}).data('gridster');
gridster.remove_all_widgets(); //刷新
$.each(JSON.parse(serialization), function() {
gridster.add_widget('<li id=' + this.id + '><img src=img/' + this.statusColor + '.png/><span class=sn>' + this.sn + '</span><span class=duty>' + this.user + '</span><span class=status style=color:' + this.statusColor + '>' + this.status + '</span><span class=program>' + this.program + '</span><span class=percent>' + this.percent + '%' + '</span><span class= edit></span><span class=delete></span></li>', this.width, this.height, this.x, this.y, "", "", this.id);
}); // 鼠标划过事件 $("#gridster li ").mouseover(
function() { //显示删除图标
$(this).find(".edit").css("display", "block");
$(this).find(".delete").css("display", "block");
});$("#gridster li").mouseout(
function() { //隐藏删除图标
$(this).find(".edit").css("display", "none");
$(this).find(".delete").css("display", "none");
});
}
});
2.async:false//将模式设置成同步就可以了
$.ajax({
type : "post",
url : url,
dataType : "json",
async:false//设置成同步就可以了
}).done(function(data){
});