我的jqgrid工作正常，每次都重新加载网格，但是我想在页面刷新之前不能完全重新加载网格。原因是用户可能在第5页的第10页，当网格重新加载时，它会将其重置为开头 - 我希望用户与更新的数据保持在同一页面上。
我正在研究的另一种方法是以某种方式保存网格状态，它正在打开的页面等，并在重新加载后导航回到该状态。我尝试使用此代码
$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }])
但它没有显示更新的数据。我错过了什么？
以下是我的完整jqGrid代码：
$('#grid').jqGrid({
url: 'GetLocations',
datatype: 'json',
jsonReader: { repeatitems: false },
mtype: 'GET',
colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
colModel: [
{ name: 'LocationId', jsonmap: 'LocationId', index: 'LocationId', width: 40, key: true },
{
name: 'LocationName', jsonmap: 'LocationName', index: 'LocationName', sortable: true, width: 150,
editable: true,
editrules: { required: true },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 64, maxlength: 64 }
},
{
name: 'AddressLine1', jsonmap: 'AddressLine1', index: 'AddressLine1', sortable: false, width: 150,
editable: true,
editrules: { required: true },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 64, maxlength: 64 }
},
{
name: 'AddressLine2', jsonmap: 'AddressLine2', index: 'AddressLine2', sortable: false, width: 50,
editable: true,
editrules: { required: false },
editoptions: { size: 64, maxlength: 64 }
},
{
name: 'City', jsonmap: 'City', index: 'City', width: 100,
editable: true,
editrules: { required: true },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 64, maxlength: 64 }
},
{
name: 'State_Id', jsonmap: 'State.Id', index: 'State_Id', editable: false, hidden: true
},
{
name: 'State', jsonmap: 'State.Name', index: 'State', width: 50, sortable: true, editable: true,
edittype: 'select',
editoptions: {
dataUrl: 'GetLookupItems?lookupType=states',
buildSelect: createSelectList
}
},
{
name: 'Region_Id', jsonmap: 'Region.Id', index: 'Region_Id', editable: false, hidden: true
},
{
name: 'Region', jsonmap: 'Region.Name', index: 'Region', width: 80, sortable: true, editable: true,
edittype: 'select',
editoptions: {
dataUrl: 'GetLookupItems?lookupType=regions',
buildSelect: createSelectList
}
},
{
name: 'Zip', jsonmap: 'Zip', index: 'Zip', width: 40, sortable: false,
editable: true,
editrules: { required: true },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 16, maxlength: 16 }
},
{
name: 'Phone', jsonmap: 'Phone', index: 'Phone', width: 80, sortable: false,
editable: true,
editrules: { required: false },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 16, maxlength: 16 }
},
{
name: 'Fax', jsonmap: 'Fax', index: 'Fax', width: 80, sortable: false,
editable: true,
editrules: { required: false },
formoptions: { elmsuffix: ' *' },
editoptions: { size: 16, maxlength: 16 }
}],
pager: $('#pager'),
rowNum: 25,
rowList: [10, 25, 50, 100],
sortable: true,
gridview: true,
sortname: 'Name',
ignoreCase: true,
caption: 'Class Locations',
height: '100%',
autowidth: true,
loadonce: true, /* needs to be true for client side paging to work */
loadtext: 'Loading...'
});
$('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },
{ /* edit options */
url: 'UpdateLocation',
closeOnEscape: true,
closeAfterEdit: true,
//afterSubmit: ReloadGrid,
width: 500,
bottominfo: '* required fields',
bSubmit: 'Save',
recreateForm: true
},
{ /* add options */
url: 'InsertLocation',
closeOnEscape: true,
closeAfterAdd: true,
//afterSubmit: ReloadGrid,
width: 500,
bottominfo: '* required fields',
bSubmit: 'Save',
recreateForm: true
},
{ /* delete options */
url: 'DeleteLocation',
closeOnEscape: true,
//afterSubmit: ReloadGrid
}
);
$('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
});
function ReloadGrid() {
$('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
//$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }]);
return [true, '']; /* no error */
}
使用部分解决方案更新了代码（已删除colModel以获得简洁性）：
$('#grid').jqGrid({
url: 'GetLocations',
datatype: 'json',
jsonReader: { repeatitems: false },
mtype: 'GET',
colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
colModel: [
...
],
pager: $('#pager'),
rowNum: 25,
rowList: [10, 25, 50, 100],
sortable: true,
gridview: true,
sortname: 'Name',
ignoreCase: true,
caption: 'Class Locations',
height: '100%',
autowidth: true,
loadonce: true, /* needs to be true for client side paging to work */
loadtext: 'Loading...'
});
$('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },
{ /* edit options */
url: 'UpdateLocation',
closeOnEscape: true,
closeAfterEdit: true,
//afterSubmit: ReloadGrid,
afterSubmit: function () {
var $self = $(this);
setTimeout(function () {
$self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
}, 50);
return [true, ''];
},
reloadAfterSubmit: false,
width: 500,
bottominfo: '* required fields',
bSubmit: 'Save',
recreateForm: true
},
{ /* add options */
url: 'InsertLocation',
closeOnEscape: true,
closeAfterAdd: true,
afterSubmit: function () {
var $self = $(this);
setTimeout(function () {
$self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
}, 50);
return [true, ''];
},
reloadAfterSubmit: false,
width: 500,
bottominfo: '* required fields',
bSubmit: 'Save',
recreateForm: true
},
{ /* delete options */
url: 'DeleteLocation',
closeOnEscape: true,
reloadAfterSubmit: false
}
);
$('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
});
// not used...
function ReloadGrid() {
$('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{current: true, page: 2}]);
return [true, '']; /* no error */
}
答案 0 :(得分：1)
要实现您的要求，您必须将reloadAfterSubmit option of form editing设置为false。默认值reloadAfterSubmit为true，因此jqGrid会在表单编辑结束时重新加载网格（请参阅the line）。使用某些参数触发reloadGrid无法解决问题，因为在默认reloadAfterSubmit: true值的情况下，jqGrid会重新加载网格一次。
所以你必须首先使用reloadAfterSubmit: false。然后你可以使用
afterSubmit: function () {
var $self = $(this);
setTimeout(function () {
$self.jqGrid("setGridParam", { datatype: "json" })
.trigger("reloadGrid", [{ current: true }]);
}, 50);
}
或者只是在删除和编辑操作时不执行任何操作并更改服务器的响应（来自url: 'InsertLocation'），以便它返回新添加的行的id并将添加的行的ID修改为afterSubmit回调中的值。在最后一种情况下，afterSubmit回调应该返回新行的id作为返回数组的第三个元素（参见jqGrid代码的the lines）。