Add/Remove/Delete 后 JQGrid 不会重新加载更新

Question

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

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

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

loadonce 设置为 false，我将我的数据类型重置为 JSON，并且我试图在重新加载之前销毁网格。

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

function LoadGrid2() {
    //jgcontracts Grid

        $.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",
                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);
                    },
                    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);
            }
    });
}

这是我的网络方法

    [WebMethod]
    public object getDataContacts()
    {

        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Indigo2.Properties.Settings.Constr"].ConnectionString);

        SqlCommand cmd = new SqlCommand();

        cmd.CommandText = "SELECT [contid] ,cust.[cust_name] ,[first_name] ,[last_name] ,[email] FROM [Indigo].[dbo].[contacts] con LEFT JOIN [Indigo].[dbo].[customers] cust on con.custid = cust.custid";
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        con.Close();
        DataSet ds = new DataSet();
        da.Fill(ds);

        object obj = new JavaScriptSerializer().DeserializeObject(Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]));
        return obj;


    }

非常感谢任何帮助。

Answer 1

您不需要此代码。

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

像你一样，你打了两次 ajax 电话。如果您在网格参数中设置 editurl 或像您一样设置 url，则编辑后的数据会自动发布到服务器并使用 ajax 调用而不是您的数据类型是本地的。

jqGrid 在发布编辑后的数据时寻找 url(editurl) 参数而不是数据类型。

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

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

更新我明白这是为什么造成的。让我解释。

问：你的初始数据是怎么获得的？

答案：您通过自己的 ajax 调用获取数据，然后将此数据传递给数据类型为本地的网格。

问：如何更新数据？

答：您使用内置的 jqGrid 功能通过单独调用将数据远程更新到服务器。

问题：如果数据类型是本地的并且更新是服务器端的，更新不会反映网格中的本地数据，因为重新加载它，它会重新加载不受更新影响的当前本地数据。

如何解决？您有不止一种选择。

重新构造您的网格，使其使用网格选项 url 和 jsonReader 直接获取数据。也许您需要在这里阅读 docs - 即您与数据的所有交互都是服务器端的。
如果您不想进行服务器排序、分页等操作，您可以将网格选项 loadonce 设置为 true，同时结合 url 从服务器获取数据和 jsonReader。在这种情况下，您将需要 return 来自服务器的所有数据（不是部分数据）。如果这样做，则可以在 beforeSubmit 事件中将数据类型设置为 json，以便在更新后重新加载网格时，它将从服务器读取更新后的数据。
不要更改您当前的网格配置，但在这种情况下，您需要在导航器中将选项 reloadAfterSubmit 设置为 false，并编写附加内容以更新本地网格数据。

我更喜欢你使用选项 2。

我看到在这种情况下网格有一个小问题，我们会在以后的版本中尝试修复它。

Add/Remove/Delete 后 JQGrid 不会重新加载更新

JQGrid wont reload update after Add/Remove/Delete

javascript

jqgrid

webmethod