解決辦法:
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){
});