单击重新加载网格按钮后的jQgrid，所有数据均消失 [英] jQgrid after Click on Reload Grid button, all data get disappear

问题描述

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

I am new in jqGrid programming. I am using inline editing jQgrid with add, edit and reload grid functionality. When I come on page, grid loaded successfully. But after Click on reload grid button, all data from grid get disappear. The worst part is after click, its not event making Ajax call to web service. I go through the code but I didn't find any fault in my code. Below I have given my entire jqgrid code, please refer and let me know where I went wrong.

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

推荐答案

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

The main origin of your problem is in the line $("#tbOGP").setGridParam({ datatype: 'local' }); of your code. I don't understand the goal of the line. I suppose that you get the line from some example which was created for very old version of jqGrid. jqGrid supports loadonce: true holding of local data starting with version 3.7. If one uses loadonce: true then jqGrid automatically will change datatype to "local" after loading of data from the server. It's important that jqGrid saves the data loaded from the server in internal option data. So the reloading of the data for example jqGrid do using the data option. In the way the data will be not dispersed.

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

So one option to solve your problem will be to remove the line $("#tbOGP").setGridParam({ datatype: 'local' }); from gridComplete callback and add loadonce: true option.

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

Another way to solve your problem is to reset datatype to "local" before reloading. One can use beforeRefresh callback of navGrid:

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

这篇关于单击重新加载网格按钮后的jQgrid，所有数据均消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！