添加/删除/删除后，JQGrid不会重新加载更新

Question

我有一个JQGrid，它通过对Web服务的ajax调用进行更新。

一切正常，除了当我更新网格（并将其写回到我的数据库）时，所做的更改不会反映在网格中。

我阅读了许多人的报告类似问题的帖子，但是尝试了这些建议却无济于事。

loadonce设置为false，我将数据类型重置为JSON，并且在重新加载网格之前尝试破坏网格。

到目前为止，这是我的代码；

    $.ajax({
        type: "POST",
        contentType: "application/json",    
        url: "../WebService1.asmx/getDataContacts",
        dataType: "json",
        success: function (data) {
            data = data.d;
                $("#jqcontacts").jqGrid({
                    datatype: "local",
                    colNames: ['Contact ID', 'Customer ID', 'First Name', 'Last Name', 'Email'],
                    colModel: [
                        { name: 'contid', key: true, index: 'contid', width: 55, editable: true },
                        {
                            name: 'cust_name', index: 'cust_name', width: 80, align: "left", editable: true, edittype: "select",
                            editoptions: {
                                value: {}
                            }
                        },
                        { name: 'first_name', index: 'first_name', width: 55, editable: true },
                        { name: 'last_name', index: 'last_name', width: 55, editable: true },
                        { name: 'email', index: 'email', width: 170, editable: true }
                    ],
                    data: data,
                    caption: "Contacts",
                    ondblClickRow: function () {
                        var row_id = $("#jqcontacts").getGridParam('selrow');
                        jQuery("#jqcontacts").jqGrid("editGridRow", row_id,
                            ///Options for doubleclick Edit form
                            {
                            url: "../WebService1.asmx/modifyDataContacts",
                            editData: {},
                                editCaption: "The Edit Dialog",
                            beforeShowForm: function (form) {
                                $('#contid', form).attr("disabled", true);
                                },
                            recreateForm: true,
                            checkOnUpdate: true,
                            checkOnSubmit: true,
                            closeAfterEdit: true,
                            errorTextFormat: function (data) {
                                return 'Error: ' + data.responseText }});
                    },
                    viewrecords: true,
                    height: 200,
                    rowNum: 10,
                    pager: "#jqcontactsPager"
                });

            $('#jqcontacts').navGrid('#jqcontactsPager',
                // the buttons to appear on the toolbar of the grid
                { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
                // options for the Edit Dialog
                {
                    url: "../WebService1.asmx/modifyDataContacts",
                    editData: {},
                    editCaption: "The Edit Dialog",
                    beforeShowForm: function (form) {
                        $('#contid', form).attr("disabled", true);
                    },
                    afterSubmit: function () {
                        $("#jqcontacts").setGridParam({ datatype: 'json'}).trigger('reloadGrid');
                        return [true];
                    },
                    reloadAfterSubmit: true,
                    recreateForm: true,
                    checkOnUpdate: true,
                    checkOnSubmit: true,
                    closeAfterEdit: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Add Dialog
                {
                    url: "../WebService1.asmx/addDataContacts",
                    addData: {},
                    editCaption: "The Add Dialog",
                    beforeShowForm: function (form) {
                        $('#contid', form).attr("disabled", true);
                    },
                    closeAfterAdd: true,
                    recreateForm: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Delete Dailog
                {
                    url: "../WebService1.asmx/deleteDataContacts",
                    delData: {},
                    delCaption: "The Delete Dialog",
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
            });
        },
            error:
            function (msg) {
                alert(msg.status + " " + msg.statusText);
            }
    });

});

我相信这个afterSubmit函数应该这样做。

                afterSubmit: function () {
                    $("#jqcontacts").setGridParam({ datatype: 'json'}).trigger('reloadGrid');
                    return [true];
                },

非常感谢任何帮助。

Answer 1

您不需要此代码。

afterSubmit: function () {
    $("#jqcontacts").setGridParam({ datatype: 'json'}).trigger('reloadGrid');
    return [true];
},

像您一样，您执行了两个ajax调用。如果您在网格参数或URL中像这样设置editurl，则编辑的数据将通过ajax调用自动发布到服务器，而不是您的数据类型是本地。

jqGrid在发布编辑后的数据时寻找url（editurl）参数，而不寻找数据类型。

删除afterSubmit事件并进行测试。如果未保存数据，则需要查看发布到服务器的内容以及用于保存数据的服务器端代码。

当我们谈论从服务器端保存，检索，排序，...数据时，Guriddo jqGrid是服务器端独立的javascript库。