在Oleg的帮助下，我在使用jqGrid方面取得了一些进展。下一个混乱的区域是在编辑数据并将其发送到服务器进行更新之后会发生什么。如果我使用内联或表单编辑，数据在网格中看起来很棒。但是，当我单击导航中的重新加载网格按钮时，数据将恢复为原始值。我已经阅读了很多关于使用“reloadGrid”的帖子，但它没有用;可能是因为用户错误。
我正在试图找出正确的方法是在编辑后手动更新网格。我真的不想回到服务器再次获取数据。我在考虑使用 afterComplete 事件。
非常感谢任何建议。非常感谢你。
更新：我以为我的一切都在运转。如果我离开页面并重新加载数据，原始数据将显示在网格中。数据被缓存。如果我打开缓存选项以始终从服务器加载（在IE开发人员栏中），它可以工作。显示正确的数据。即使我下次加载页面时重新创建jqGrid，数据是否正常缓存是否正常？
更新＃2：在查看此演示http://www.trirand.com/blog/jqgrid/jqgrid.html时，选择行编辑和基本示例。单击编辑行13，进行更改，然后保存更改。单击导航器工具栏中的“重新加载网格”，数据将刷新。有办法避免这种情况吗？我知道我错过了什么。
$.getJSON('FileServices/Get/JSA/' + id, function (data) {
$("#header_id").html(data.header.Id);
$('#dateAdded').datepicker();
$('#number').val(data.header.Number);
onclickSubmitLocal = function (options, postdata) {
},
onAfterComplete = function (response, postdata, formid) {
$("#list").setCell(postdata.id, "Step_Number", postdata.Step_Number);
},
editSettings = {
recreateForm: true,
width: 400,
mtype: "PUT",
jqModal: true,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true,
viewPagerButtons: false,
editData: { SomeExtraData: function () { return $('#header_id').val(); } },
afterComplete: onAfterComplete,
onclickSubmit: onclickSubmitLocal
},
addSettings = {
recreateForm: true,
width: 400,
mtype: "POST",
jqModal: true,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
editData: { SomeExtraData: function () { return $('#header_id').val(); } },
onclickSubmit: onclickSubmitLocal
};
$("#list").jqGrid({
url: 'FileServices/GetList/JSA',
data: data.details,
editurl: 'FileServices/Save/JSADetail',
datatype: 'local',
ajaxRowOptions: { contentType: "application/json", type: "PUT", asyc: true },
serializeRowData: function (data) {
return JSON.stringify(data);
},
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
}
$("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
},
loadComplete: function (data) {
var det = $("#details");
$("#list").setGridWidth(det.width() - 18, true);
},
colNames: ['Actions', 'Header_Id', 'Id', 'Step Number', 'Step Description', 'H', 'C', 'S'],
colModel: [
{ name: 'act', index: 'act', width: 75, sortable: false },
{ name: 'Header_Id', editable: true, index: 'Header_Id', width: 20, sortable: false, hidden: true },
{ name: 'Id', editable: true, index: 'Id', width: 30, sortable: false, hidden: true },
{ name: 'Step_Number', editable: true, index: 'Step_Number', align: 'center', width: 50, fixed: true, resizable: false, sortable: false, title: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="font-weight: bold: true; white-space: normal; vertical-align: middle;' } },
{ name: 'Step_Description', editable: true, index: 'Step_Description', edittype: 'textarea', editoptions: { rows: '4', cols: '40' }, sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
{ name: 'H', index: 'H', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
{ name: 'C', index: 'C', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
{ name: 'S', index: 'S', width: 0, sortable: false, hidden: true }
],
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 15, 20, 25, 30, 50],
sortname: 'Id',
height: 'auto',
rownumbers: true,
autowidth: true,
forceFit: true,
shrinkToFit: true,
sortorder: 'asc',
viewrecords: true,
gridview: true,
hidegrid: false,
caption: ''
}).navGrid("#pager", { add: true, edit: true, del: false, search: false }, editSettings, addSettings, {}, {}, {});
$.extend($.jgrid.defaults, {
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" }
});
$.extend($.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
type: "PUT",
closeAfterEdit: true,
closeOnEscape: true,
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
});
});
和
[WebInvoke(Method = "PUT", UriTemplate = "/Save/JSADetail", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSADetail(int Header_Id, int Id, string Step_Number, string Step_Description, string oper, string id)
{
JSA.Detail detail = new JSA.Detail();
detail.Id = Id;
detail.Step_Number = Step_Number;
detail.Step_Description = Step_Description;
detail.Update();
return "Ok";
}
答案 0 :(得分：2)
在jqGrid中保存后，您是否确认数据库中的数据已更改？您是否在Fiddler或Firebug验证了来自服务器的错误数据？可能是你有一些缓存问题。
在对您的其他问题的评论中，我严格建议您不要使用$.getJSON手动加载数据。如果您这样做，则应以任何方式使用$.ajax cache: false参数或至少设置cache: false选项作为默认选项。您可以使用$.ajaxSetup执行此操作。顺便说一下，默认cache: true值的问题通常仅存在于中，只能在Internet Explorer 中存在。如果您在另一个浏览器中使用网格编辑重复实验，并且您在浏览器中看到没有问题，则可以确定您的问题是cache: false选项。
解决相同缓存问题的另一种方法是在服务器响应的HTTP标头中设置"Cache-Control: max-age=0"，以提供网格数据。在WCF中，您可以使用
WebOperationContext.Current.OutgoingResponse.Headers.Set (
HttpResponseHeader.CacheControl,
"max-age=0");
在其他ASP.NET中的
HttpContext.Current.Response.AddHeader ("Cache-Control", "max-age=0");
如果意味着在下一次请求同一个URL时，旧响应不能仅从服务器获取。客户端必须重新验证响应。如果您没有设置其他HTTP标头，则意味着只需再次获取请求。我建议您阅读有关该主题的the answer。顺便说一句，我个人总是在WCF中使用上述设置。在我使用额外prmNames: { nd:null}参数的情况下。如果您使用datatype: 'local'代替datatype: 'json'，则设置不执行任何操作。
此外我今天写的another answer对你来说也很有趣。它描述的不是相同但非常接近的情况。它说明了为什么手动从服务器加载数据并不好。
答案 1 :(得分：0)
在我的ajax请求中设置cache: false解决了问题，我不必每次都重新加载jqgrid。感谢您提出这个问题，感谢Oleg在本网站上对jqgrid的大力帮助。