Question

我希望能够在页面编号高于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函数中，但它也不起作用。始终显示警报消息，但网格未刷新。

Answer 1

我发现了一种解决方法，但它并不完美。如果我使用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);
    }
}

Answer 2

简介

这适用于jqGrid javascript版本4.4.4。

主要问题是reloadGrid在我们想要的时候不起作用。要理解为什么我会解释我今天所学到的关于reloadGrid的所有内容。如果没有兴趣可以跳到解决方案。

reloadGrid如何工作

reloadGrid具有以下伪代码：

运行treeGrids的预处理逻辑
运行多选的预处理逻辑
运行页面逻辑和滚动逻辑的预处理逻辑
填充网格数据（通过调用populate()或populateVisible()）

populate和populateVisible都有相同的伪代码：

检查内部变量loading，if (loading) { return; } else {/*load data*/}
运行预处理以进行分页和分组
设置loading = true
将数据加载到内存中（取决于ajax或字符串或本地的数据类型）
使用已加载的内存填充网格
设置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
    }
}

JqGrid - 在loadComplete事件中重新加载

2 个答案:

简介

reloadGrid如何工作

如何解决此问题

JqG​​rid - 在loadComplete事件中重新加载

2 个答案:

简介

reloadGrid如何工作

如何解决此问题

JqGrid - 在loadComplete事件中重新加载