jsGrid:如何将对网格的更新延迟到回调完成之前?

时间:2018-11-25 17:51:48

标签: javascript ajax jsgrid

我正在使用js-grid进行内联编辑。我正在使用回调onItemInsertingonItemUpdatingonItemDeleting进行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
    });

   }

0 个答案:

没有答案