如何使用ajax调用使jquery行不可编辑并在数据库中保存同一行？答案

【问题标题】：How to make jquery row non editable and save the same row in Database using ajax call?如何使用ajax调用使jquery行不可编辑并在数据库中保存同一行？
【发布时间】：2015-06-27 01:05:21
【问题描述】：

我使用下面的代码使 jqGrid 的内联编辑为 true -

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

但在下面的代码中，在保存行的同时，我想进行 ajax 调用以便将该行保存在数据库中。并且还想让该行不可编辑。目前'clientArray'用于暂时保存浏览器上的值。但之后无法使其不可编辑。

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

那么如何在数据库中成功保存行后进行ajax调用并使行不可编辑？

【问题讨论】：

标签： java javascript jqgrid jqgrid-formatter

【解决方案1】：

要使行不可编辑，您应该将not-editable-row 类添加到相应的行。确切的代码可能取决于您使用的 jqGrid 配置。例如，您可以只添加行

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

在saveRow 行之后，但本地数据的排序或分页将重新创建网格体，因此它将删除任何先前设置的网格类或行。要使信息持久化，您可以将其与主要数据一起保存在本地 data 中。例如，您可以执行以下操作

$("#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");
});

"#prjectForecastData"网格的代码可以使用rowattr：

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

它将在本地修改的行上恢复类"not-editable-row"。

要获取所有修改的行并将其发送到服务器，可以使用以下代码

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)
    }
});

$.ajax 请求的确切参数将取决于您获取数据的服务器代码。

您将使用一个 ajax 调用保存所有修改的数据。或者，您可以在saveRow 的调用中使用另一个（基于服务器的）url。在这种情况下，保存的一行的数据将自动发送到服务器上，格式在the documentation中描述。

【讨论】：