如何使jQuery行不可编辑，并使用ajax调用将同一行保存在数据库中？

Question

I made the inline edit true for jqGrid by using below code -

 if (rowid) {
      if (rowid !== lastsel) {
          $("#prjectForecastData").jqGrid('restoreRow', lastsel);
          $("#prjectForecastData").jqGrid('editRow', rowid, true);
          lastsel = rowid;
       } else {
              $("#prjectForecastData").jqGrid('restoreRow', lastsel);
              lastsel = "";
          }
    }

But here in below code, while saving row, I want to make an ajax call in order to save that row in database. and also want to make that row non editable. Right now 'clientArray' is used to save the value on browser temporarily.But unable to make it non editable after that.

$("#saveForecastEditData").click(function(){
     $("#prjectForecastData").jqGrid('saveRow',lastsel, false, 'clientArray');
       jQuery('#prjectForecastData').editRow(lastsel,false);
});

So how to make an ajax call and make the row non editable after saving the row in DB successfully?

Answer 1

To make row non-editable you should add not-editable-row class to the corresponding row. The exact code can depend on jqGrid configuration which you use. For example you can just add the line

$("#" + lastsel).addClass("not-editable-row");

after the line with saveRow , but sorting or paging of local data will recreate the grid body and so it will remove any previously set classes or rows of the grid. To make the information persistent you can save it in local data together with the main data. For example you can do the following

$("#saveForecastEditData").click(function () {
    var $myGrid = $("#prjectForecastData"), rowData;
    $myGrid.jqGrid("saveRow", lastsel, { url: "clientArray"});
    rowData = $myGrid.jqGrid("getLocalRow", lastsel);
    // add new property to the data
    rowData.modified = true;
    // add the "not-editable-row" immediately
    $("#" + lastsel).addClass("not-editable-row");
});

The code of "#prjectForecastData" grid can use rowattr :

$("#prjectForecastData").jqGrid({
    // ... all your existing parameters here
    rowattr: function (rowData) {
        if (rowData.modified) {
            return {"class": "not-editable-row"};
        }
    }
});

It will restore the class "not-editable-row" on rows which was modified locally.

To get all modified rows and to send there to the server one can use the following code

var data = $("#prjectForecastData").jqGrid("getGridParam", "data");
var modifiedData = $.grep(data, function (item) { return item.modified; } );
$.ajax({
    url: "someServerUtl",
    type: "POST",
    dataType: "json",
    data: {
        modifications: JSON.stringify(modifiedData)
    }
});

The exact parameters of $.ajax request will depend on your server code which get the data.

In the way you will save all modified data using one ajax call. Alternativaly you can just use another (server based) url in the call of saveRow . In the case the data of one saved row will be automatically send to the server on in the format described in the documentation .