[英]How to make jquery row non editable and save the same row in Database using ajax call?
我使用以下代码对jqGrid进行了内联编辑:
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);
});
那么,如何在将行成功保存到DB中之后进行ajax调用并使该行不可编辑?
要使行不可编辑,应将not-editable-row
类添加到相应的行。 确切的代码可以取决于您使用的jqGrid配置。 例如,您可以添加行
$("#" + lastsel).addClass("not-editable-row");
在带有saveRow
的行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"
上还原类"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
。 如果保存的一行数据将自动以文档中所述的格式发送到服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.