我希望能够在页面编号高于loadComplete事件内的总页数的情况下重新加载jqgrid。我将网格设置保存到浏览器本地存储中，如此答案 - Persisting jqGrid column preferences
我已经添加了一个调用来触发重新加载网格并将页面设置回1，但它似乎在loadComplete方法中不起作用。我调试了代码并调用了方法。
Javascript :(重要的部分是jqGrid定义中的loadComplete函数）
$(document).ready(function() {
var $grid = $('#grid'),
cm = [
{ name: 'Id', index: 'Id', width: 120, align: 'left', editable: false,sortable: true,hidden: true,hidedlg: true,Key: true},
{ name: 'Status', index: 'Status', width: 80, align: 'left', editable: false,sortable: true,hidden: true,hidedlg: false,Key: false},
{ name: 'Reference', index: 'Reference', width: 80, align: 'left', editable: false,sortable: true,hidden: false,hidedlg: false,Key: false},
{ name: 'CustomerReference', index: 'CustomerReference', width: 140, align: 'left', editable: false,sortable: true,hidden: false,hidedlg: false,Key: false},
{ name: 'Logged', index: 'Logged', width: 100, align: 'left', editable: false,sortable: true,hidden: false,hidedlg: false,Key: false}
],
saveObjectInLocalStorage = function (storageItemName, object) {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.setItem(storageItemName, JSON.stringify(object));
}
},
removeObjectFromLocalStorage = function (storageItemName) {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.removeItem(storageItemName);
}
},
getObjectFromLocalStorage = function (storageItemName) {
if (typeof window.localStorage !== 'undefined') {
return $.parseJSON(window.localStorage.getItem(storageItemName));
}
},
myColumnStateName = function (grid) {
return window.location.pathname + '#' + grid[0].id;
},
saveColumnState = function (perm) {
var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName,
postData = this.jqGrid('getGridParam', 'postData'),
columnsState = {
search: this.jqGrid('getGridParam', 'search'),
page: this.jqGrid('getGridParam', 'page'),
sortname: this.jqGrid('getGridParam', 'sortname'),
sortorder: this.jqGrid('getGridParam', 'sortorder'),
rowNum: this.jqGrid('getGridParam', 'rowNum'),
permutation: perm,
colStates: {}
},
colStates = columnsState.colStates;
if (typeof (postData.filters) !== 'undefined') {
columnsState.filters = postData.filters;
}
for (i = 0; i < l; i++) {
colItem = colModel[i];
cmName = colItem.name;
if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
colStates[cmName] = {
width: colItem.width,
hidden: colItem.hidden
};
}
}
saveObjectInLocalStorage(myColumnStateName($grid), columnsState);
},
myColumnsState,
isColState,
restoreColumnState = function (colModel) {
var colItem, i, l = colModel.length, colStates, cmName,
columnsState = getObjectFromLocalStorage(myColumnStateName($grid));
if (columnsState) {
colStates = columnsState.colStates;
for (i = 0; i < l; i++) {
colItem = colModel[i];
cmName = colItem.name;
if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
}
}
}
return columnsState;
},
firstLoad = true;
myColumnsState = restoreColumnState(cm);
isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
$grid.bind('SaveSettings', function() { saveColumnState.call($grid, $grid.jqGrid('getGridParam', 'remapColumns')); });
$grid.jqGrid({url: '/Databind/',
datatype: 'json',
mtype: 'GET',
height: '100%',
width: 940,
shrinkToFit: false,
colModel: cm,
rowNum: isColState ? myColumnsState.rowNum : 15,
rowList: [5,10,15,30,50],
pager: $('#gridPager'),
page: isColState ? myColumnsState.page : 1,
sortname: isColState ? myColumnsState.sortname : 'BillingRecordId',
sortorder: isColState ? myColumnsState.sortorder : 'asc',
search: isColState ? myColumnsState.search : false,
viewrecords: true,
loadComplete: function () {
if (firstLoad) {
firstLoad = false;
if (isColState) {
$(this).jqGrid('remapColumns', myColumnsState.permutation, true);
}
}
saveColumnState.call($(this), this.p.remapColumns);
if($(this).jqGrid('getGridParam', 'page') > $(this).jqGrid('getGridParam', 'lastpage')) {
alert('reloading'); //this message shows
$(this).trigger('reloadGrid', [{ page: 1}]); //this doens't refresh the grid
}
}
}).navGrid('#gridPager', { edit: false, add: false, del: false, refresh: false, search: false });
$grid.jqGrid('navButtonAdd', '#gridPager', {
buttonicon: 'ui-icon-closethick',
caption: 'Reset Settings',
title: 'Reset Settings',
onClickButton: function () {
removeObjectFromLocalStorage(myColumnStateName($grid));
$grid.unbind('SaveSettings');
window.location.reload();
}
});
$grid.jqGrid('navButtonAdd', '#gridPager', {
buttonicon: 'ui-icon-transferthick-e-w',
caption: 'Choose Columns',
title: 'Choose Columns',
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
saveColumnState.call(this, perm);
}
}
});
}
});
});
$(window).unload( function () { $('#grid').trigger('SaveSettings'); });
我已阅读并无法找到解决方案。我尝试将触发器（'reloadGrid'）移动到gridComplete函数中，但它也不起作用。始终显示警报消息，但网格未刷新。
答案 0 :(得分：4)
我发现了一种解决方法，但它并不完美。如果我使用setTimeout为重新加载调用添加延迟，一切正常。我添加了一个额外的检查，以确保lastPage超过0，否则空网格将不断重新加载。
loadComplete: function () {
if (firstLoad) {
firstLoad = false;
if (isColState) {
$(this).jqGrid('remapColumns', myColumnsState.permutation, true);
}
}
saveColumnState.call($(this), this.p.remapColumns);
var lastPage = $(this).jqGrid('getGridParam', 'lastpage');
var page = $(this).jqGrid('getGridParam', 'page');
if(lastPage > 0 && page > lastPage) {
setTimeout(function () { $('#grid').trigger('reloadGrid', [{ page: 1}]); },150);
}
}
答案 1 :(得分：0)
这适用于jqGrid javascript版本4.4.4。
主要问题是reloadGrid在我们想要的时候不起作用。要理解为什么我会解释我今天所学到的关于reloadGrid的所有内容。如果没有兴趣可以跳到解决方案。
reloadGrid具有以下伪代码：
populate()或populateVisible()） populate和populateVisible都有相同的伪代码：
loading，if (loading) { return; } else {/*load data*/} loading = true loading = false 我无法想象没有ajax的问题。因此，我将专注于ajax。
网格提供了许多我们可以在ajax过程中挂钩的有用事件。不幸的是，我们可以挂钩的所有jqGrid事件都发生在第6步之前。这意味着当我们的事件处理程序被触发时loading总是等于true。由于loading为假，reloadGrid在呼叫populate()时不会做任何事情。
为了解决这个问题，我们需要能够在loading设置为false之后注入我们的逻辑以重新加载到某个位置。我发现这样做的最简单方法是将我们的逻辑注入ajax完成事件。对于上面给出的问题，它将如下所示。
function reloadGridIfPageIsBeyondLast() {
if($(this).jqGrid('getGridParam', 'page') > $(this).jqGrid('getGridParam', 'lastpage')) {
$(this).trigger('reloadGrid', [{ page: 1}]);
}
}
$('#grid').jqGrid('setGridParam', {
ajaxGridOptions: {
complete: reloadJqGridIfPagePastLast
}
}