单击重新加载网格按钮后的jQgrid，所有数据都消失了

Question

我是 jqGrid 编程的新手。我正在使用具有添加、编辑和重新加载网格功能的内联编辑 jQgrid。当我进入页面时，网格加载成功。但是在单击重新加载网格按钮后，网格中的所有数据都会消失。最糟糕的部分是点击之后，它不是让 Ajax 调用 Web 服务的事件。我浏览了代码，但我的代码没有发现任何错误。下面我给出了我的整个 jqgrid 代码，请参考并告诉我哪里出错了。

function RenderOGPGrid() {

var oGrid = $('#tbOGP'), lastSel;
var topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager";

oGrid.jqGrid({
    url: sRelativePath + '/WSAjax.asmx/GetDataForGrid',
    mtype: 'POST',
    datatype: 'json',
    ajaxGridOptions: {
        contentType: "application/json; charset=utf-8"
    },
    serializeGridData: function (data) {
        return JSON.stringify(data);
    },
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    },
    onSelectRow: function (rowid) {
        if (rowid && rowid != lastSel) {
            if (typeof lastSel !== "undefined") {
                $(this).jqGrid('restoreRow', lastSel);
            }
            lastSel = rowid;
        }
        updateButtonState($(this));
    },
    colNames: ['Id', 'Name', 'Age'],
    colModel: [
        { name: 'Id', index: 'Id', width: 30},
        { name: 'Name', index: 'Name', width: 30},
        { name: 'Age', index: 'Age', width: 30},
    ],
    prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
    autowidth: true,
    search: false,
    postData: {
        filters: null,
        spName: 'GetOutwardGPList',
        paramXML: ""
    },
    width: 'auto',
    height: 'auto',
    rowNum: 20,
    rowList: [20, 50, 100, 150, 200],
    sortname: "",
    sortorder: "asc",
    page: 1,
    gridview: true,
    autoencode: true,
    viewrecords: true,
    ignoreCase: true,
    toppager: true,
    footerrow: true,
    editurl: 'clientArray',
    gridComplete: function () {
        $("#tbOGP").setGridParam({ datatype: 'local' });

        $("table#tbOGP tr:last").addClass('ireg-jqgrid-lastrow');
        $("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
        recalculateWidthInPercent('container', 'tbOGP', 0.96);
    },
    loadComplete: function () {
        updateButtonState($(this));
    }, 
    caption: 'Outward Gate Pass List'
 }).jqGrid('navGrid', topPagerSelector, {
    add: false,
    edit: false,
    del: false,
    search: false
    //TckNo. iReg-444(DF01): Removed property refresh: false 
 }, {}, {}, {}, {}, {}).
 jqGrid('inlineNav', topPagerSelector, {
    addParams: {
        useDefValues: true,
        addRowParams: {
            oneditfunc: function (rowid) {
                updateButtonState($(this));
            },
            aftersavefunc: function (rowid, response) {
                updateButtonState($(this));
            },
            afterrestorefunc: function () {
                updateButtonState($(this));
            }
        }
    },
    editParams: myEditParams
 });
}

Answer 1

问题的主要根源在于代码的$("#tbOGP").setGridParam({ datatype: 'local' }); 行。我不明白这条线的目标。我想你从一些为非常旧版本的 jqGrid 创建的示例中得到了这条线。 jqGrid 从 3.7 版开始支持 loadonce: true 保存本地数据。如果使用loadonce: true，那么jqGrid 自动将在从服务器加载数据后将datatype 更改为"local"。重要的是 jqGrid 将从服务器加载的数据保存在内部选项data 中。因此，例如 jqGrid 的数据重新加载使用 data 选项。这样数据就不会分散了。

因此，解决您的问题的一种选择是从gridComplete 回调中删除$("#tbOGP").setGridParam({ datatype: 'local' }); 行并添加loadonce: true 选项。

解决问题的另一种方法是将datatype 重置为"local"在重新加载之前。可以使用navGrid的beforeRefresh回调：

...
}).jqGrid('navGrid', topPagerSelector, {
    add: false,
    edit: false,
    del: false,
    search: false´,
    beforeRefresh: function () {
         $(this).jqGrid("setGridParam",{datatype: "json"});
    }
    //TckNo. iReg-444(DF01): Removed property refresh: false 
}, {}, {}, {}, {}, {}).
...