С помощью Олега я действительно добился определенных успехов в использовании jqGrid.Следующая область путаницы связана с тем, что происходит после того, как данные отредактированы и отправлены на сервер для обновления.Если я использую встроенные или формы редактирования, данные отлично смотрятся в сетке.Но когда я нажимаю кнопку Reload Grid на панели навигации, данные возвращаются к своим первоначальным значениям.Я прочитал много сообщений об использовании "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";
}