如何使用Ajax调用使jquery行不可编辑并在数据库中保存同一行? [英] How to make jquery row non editable and save the same row in Database using ajax call?

问题描述

我使用以下代码对jqGrid进行了内联编辑-

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 = "";
          }
    }

但是在下面的代码中，在保存行的同时，我想进行ajax调用以将该行保存在数据库中.并且还希望使该行不可编辑. 现在'clientArray'用于暂时将值保存在浏览器中，但此后无法使其不可编辑.

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

那么在成功将行保存到数据库之后，如何进行ajax调用并使该行不可编辑?

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

推荐答案

要使行不可编辑，应在相应的行中添加not-editable-row类.确切的代码可以取决于您使用的jqGrid配置.例如，您可以仅添加行

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

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

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

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

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

它将在本地修改的行上恢复类"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)
    }
});

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

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

通过一个ajax调用，您将保存所有修改的数据.另外，您可以在saveRow的调用中使用另一个(基于服务器的)url.如果保存的一行数据将自动以

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.

这篇关于如何使用Ajax调用使jquery行不可编辑并在数据库中保存同一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！