我正在使用js-grid进行内联编辑。我正在使用回调onItemInserting
,onItemUpdating
和onItemDeleting
进行AJAX调用,分别执行服务器端的INSERT,UPDATE和DELETE操作。但是,问题在于客户端的网格更新正在执行AJAX调用的回调之前发生。结果,无论服务器端的操作结果如何,都将进行客户端更新。
这是我的应用程序的部分代码:
function displayConfigTable(config) {
let parameters = {
configName: config
};
$.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {
displayGrid(config, data);
});
}
function onUpdateCallback({
grid, // grid instance
row, // updating row jQuery element
item, // updating item
itemIndex, // updating item index
previousItem, // shallow copy (not deep copy) of item before editing
}) {
//TODO:
}
function onDeleteCallback({
grid, // grid instance
row, // deleting row jQuery element
item, // deleting item
itemIndex, // deleting item index
}) {
//TODO:
}
function onInsertCallback({grid,item}) {
var config = grid.configName;
var data = {
configName: grid.configName,
item: item
};
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/updateConfig',
dataType : 'json',
data : JSON.stringify(data),
success : function(result) {
alert(result);
**//This is where I want the client-side update to happen to the grid**
},error : function(result){
console.log(result);
**//this is where I want to cancel the client side update to grid**
}
});
}
function displayGrid(config,data) {
var fields = [];
switch(config) {
case "category":
fields = [
{name: "Id",visible:false,width:0},
{ name: "Name", type: "text", width: 250, validate: "required" },
{ type: "control" }]
break;
default:
break;
}
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: false,
data: data,
fields: fields,
configName:config,
onItemInserting:onInsertCallback,
onItemUpdating:onUpdateCallback,
onItemDeleting:onDeleteCallback
});
}