Javascript 如何显示刚刚在jqGrid中更新的已保存值而不重新加载整个网格？

我的jqgrid可以很好地工作，每次都完全重新加载网格，但是我不希望在刷新页面之前完全重新加载网格。原因是，用户可能在第5页（共10页），当网格重新加载时，它会将其重置回起始页-我希望用户与更新的数据保持在同一页上

我正在研究的另一种方法是以某种方式保存网格状态、它所在的页面等，并在重新加载后导航回该页面。我用这个代码试过了

$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }])

但它没有显示更新的数据。我错过了什么

这是我的完整jqGrid代码：

            $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
               colModel: [
                { name: 'LocationId', jsonmap: 'LocationId', index: 'LocationId', width: 40, key: true },
                {
                    name: 'LocationName', jsonmap: 'LocationName', index: 'LocationName', sortable: true, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine1', jsonmap: 'AddressLine1', index: 'AddressLine1', sortable: false, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine2', jsonmap: 'AddressLine2', index: 'AddressLine2', sortable: false, width: 50,
                    editable: true,
                    editrules: { required: false },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'City', jsonmap: 'City', index: 'City', width: 100,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'State_Id', jsonmap: 'State.Id', index: 'State_Id', editable: false, hidden: true
                },
                {
                    name: 'State', jsonmap: 'State.Name', index: 'State', width: 50, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=states',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Region_Id', jsonmap: 'Region.Id', index: 'Region_Id', editable: false, hidden: true
                },
                {
                    name: 'Region', jsonmap: 'Region.Name', index: 'Region', width: 80, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=regions',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Zip', jsonmap: 'Zip', index: 'Zip', width: 40, sortable: false,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Phone', jsonmap: 'Phone', index: 'Phone', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Fax', jsonmap: 'Fax', index: 'Fax', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                }],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'

        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                //afterSubmit: ReloadGrid
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        //$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }]);
        return [true, '']; /* no error */
    }

 $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
            colModel: [

         ...

            ],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'
        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                reloadAfterSubmit: false
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    // not used...
    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{current: true, page: 2}]);
        return [true, '']; /* no error */
    }

使用部分解决方案更新了代码（为了简洁起见删除了colModel）：

            $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
               colModel: [
                { name: 'LocationId', jsonmap: 'LocationId', index: 'LocationId', width: 40, key: true },
                {
                    name: 'LocationName', jsonmap: 'LocationName', index: 'LocationName', sortable: true, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine1', jsonmap: 'AddressLine1', index: 'AddressLine1', sortable: false, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine2', jsonmap: 'AddressLine2', index: 'AddressLine2', sortable: false, width: 50,
                    editable: true,
                    editrules: { required: false },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'City', jsonmap: 'City', index: 'City', width: 100,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'State_Id', jsonmap: 'State.Id', index: 'State_Id', editable: false, hidden: true
                },
                {
                    name: 'State', jsonmap: 'State.Name', index: 'State', width: 50, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=states',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Region_Id', jsonmap: 'Region.Id', index: 'Region_Id', editable: false, hidden: true
                },
                {
                    name: 'Region', jsonmap: 'Region.Name', index: 'Region', width: 80, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=regions',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Zip', jsonmap: 'Zip', index: 'Zip', width: 40, sortable: false,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Phone', jsonmap: 'Phone', index: 'Phone', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Fax', jsonmap: 'Fax', index: 'Fax', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                }],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'

        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                //afterSubmit: ReloadGrid
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        //$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }]);
        return [true, '']; /* no error */
    }

 $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
            colModel: [

         ...

            ],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'
        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                reloadAfterSubmit: false
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    // not used...
    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{current: true, page: 2}]);
        return [true, '']; /* no error */
    }

---

要实现您的需求，您必须将

reloadeaftersubmit

设置为false。

reloadeaftersubmit

的默认值为true，因此jqGrid会在表单编辑结束时重新加载网格（请参阅）。使用某些参数触发

reloadGrid

无法解决问题，因为在默认

reloadAfterSubmit:true

值的情况下，jqGrid将再次重新加载网格

因此，首先必须使用

reloadeaftersubmit:false

。那么你可以使用

afterSubmit:function（）{
var$self=$（本）；
setTimeout（函数（）{
$self.jqGrid（“setGridParam”，{datatype:“json”}）
.trigger（“reloadGrid”，[{current:true}]）；
}, 50);
}

---

或者在执行删除和编辑操作时不做任何操作，并更改服务器的响应（从

url:'InsertLocation'

），使其返回新添加行的

id

，并将添加行的id修改为

afterSubmit

回调中的值。在最后一种情况下，

afterSubmit

回调应该返回新行的id作为返回数组的第三个元素（请参见jqGrid代码的部分）。

谢谢Oleg！这让我部分达到了目的。。在设置reloadAfterSubmit:false并添加您提供的afterSubmit函数代码后，我现在可以根据需要添加和删除。但是，我的编辑似乎仍然刷新了整个网格。我将用这些更改更新我的原始帖子。我不确定我是否理解您关于返回编辑（和删除）操作的id的建议？我在本地已经有了身份证，为什么还要用它呢？如果为add重置datatype:json有效，那么它也可以用于编辑操作？还有其他想法吗？谢谢。@Tone：为了简化我的建议，让我们只使用

reloadeaftersubmit:false

而不使用任何

afterSubmit

。jqGrid将添加

addedrow

参数的新行基（默认为“first”）。因此，该行将被添加为第一行wnd。您可以在网格中有多达25行（

rowNum

）。删除操作将删除行和所选内容。您可以将行数减少为25（

rowNum

）。添加操作的主要问题：jqGrid不知道新行的rowid。如果您从数据库加载数据并自动生成id，则服务器必须将新添加行的id返回jqGrid。@Tone:Edit with

reloadAfterSubmit:false

和with

afterSubmit

应能正常工作。唯一的问题是，编辑的行将保留在同一位置，重新加载网格有助于放置与

sortname

相对应的行位置（

Name

）。如果顺序对您来说不是那么重要，那么您应该删除

afterSubmit

以进行编辑操作。太好了！我想我已经试过了…我想没有。我不需要求助于行，事实上，这可能会让用户感到困惑，因为它将从当前页面消失。谢谢您在解决方案背后提供的帮助和解释。@Tone:不客气

afterSubmit

callback将

jqXHR

对象（

XMLHttpRequest

的超集）作为第一个参数。因此，服务器可以在响应中返回新行的id（例如从数据库生成）。在这种情况下，

jqXHR.responseText

将是id，并且代码

afterSubmit:function（jqXHR）{return[true，“，jqXHR.responseText]；}

将把新行的基于服务器的id转发给jqGrid。在这种情况下，新行将使用rowid添加到网格中。您可以通过开发人员工具检查行的

id

属性。