jQgrid点击Reload Grid按钮后,所有数据都消失了

时间:2014-03-22 13:28:43

标签: jquery ajax jqgrid jqgrid-inlinenav

我是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
 });
}

1 个答案:

答案 0 :(得分:1)

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

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

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

...
}).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 
}, {}, {}, {}, {}, {}).
...