1
Olegの助けを借りて、私は実際にjqGridの使用についていくつか進歩しています。次の混乱の領域は、データが編集され、更新のためにサーバーに送信された後の状況です。インライン編集やフォーム編集を使用すると、データはグリッドで大きく見えます。しかし、ナビのリロードグリッドボタンをクリックすると、データは元の値に戻ります。私は "reloadGrid"の使い方についてたくさんの投稿を読んだが、うまくいきません。おそらくユーザーエラーが原因です。jqGridで正常に編集後にグリッドをクリックすると古いデータがロードされる
私は正しいアプローチが、編集後にグリッドを手動で更新するかどうかを調べようとしています。私は実際にデータを再度取得するためにサーバーに戻って行きたくありません。私はaftercompleteイベントを使用することを考えていました。
アドバイスをいただければ幸いです。どうもありがとうございました。
更新：私はすべてが機能していると思った。ページを離れてデータをリロードすると、元のデータがグリッドに表示されます。データはキャッシュされます。キャッシュオプションをオンにすると、（IE開発者バーの）サーバーから常に読み込まれるようになります。正しいデータが表示されます。次回のページロード時にjqGridを再作成しても、データがキャッシュされるのは普通ですか？
更新＃2：このデモでは、http://www.trirand.com/blog/jqgrid/jqgrid.htmlを見て行編集と基本例を選択してください。 [Edit row 13]をクリックして変更を加え、変更を保存します。ナビゲータツールバーの「Reload Grid」をクリックすると、データが元に戻ってきます。これを避ける方法はありますか？私は何かが足りないことを知っている。
$.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";
}
問題は、HTTP GETを使用したAjaxの使用と、データをどのようにキャッシュするかについての情報を持たないレスポンスです。 IEは、次回にIEが再起動されるまでキャッシュから古いデータを取得できるだけであるため、ケースを解釈します。私の答えでもっと読む。 – Oleg
あなたのアップデート＃2に：とても特殊なケースだと思います。デモ側で変更した日付は実際にデータベースに保存され、データベースは非常に短時間で完全なガベージになります。だから私は、サーバーの部分だけで変更を破棄し、変更はクライアント側でのみ行われると仮定します。フォームの編集の場合、 'reloadAfterSubmit：false'が必ず使用されます。私はその事件はあなたの事件に共通するものはないと思う。それはちょうどあなたのケースに近づきます。 – Oleg
こんにちはOleg。私の場合は、データベースに書き込んでいますが、成功しています。 「ロード」ページに戻ってアイテムを再度選択してロードすると、グリッドは正しい（そして新しく更新された）データを読み込みます。グリッドのリロードボタンをクリックするか、5の代わりに10個のレコードを選択すると、データは元の状態に戻ります。グリッドの背後にあるデータは、編集するときに更新されていないようです。 jqGridは変更後に表示されるデータをどこから取得しますか？それはデータベースからそれを取得していません。データベースを更新すると、グリッドの後ろのデータも更新する必要がありますか？ありがとうございました。 – DrZ