时间戳

首页 > 解决方案 > 添加/删除/删除后 JQGrid 不会重新加载更新

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

问题描述

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

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

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

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;


    }

非常感谢任何帮助。

标签： javascriptjqgridwebmethod

解决方案

您不需要此代码。

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

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

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

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

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

更新 我明白为什么会这样。让我解释。

问题：您如何获得初始数据？

答：您使用自己的 ajax 调用获取数据，然后将此数据传递给数据类型为 local 的网格。

问：你们如何更新数据？

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

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

怎么解决？你有不止一种选择。

  1. 重建您的网格，使其使用网格选项 url 和 jsonReader 直接获取数据。也许您需要在这里阅读文档——即您与数据的所有交互都是服务器端的。

  2. 如果您不想进行服务器排序、分页等，您可以使用网格选项 loadonce 为 true 并结合 url 从 servrer 和 jsonReader 获取数据。在这种情况下，您需要从服务器返回所有数据（不是部分）。如果这样做，那么您可以在 beforeSubmit 事件中将数据类型设置为 json，这样当网格在更新后重新加载时，它将从服务器读取更新的数据。

  3. 不要更改您当前的网格配置，但在这种情况下，您需要在导航器中将选项 reloadAfterSubmit 设置为 false 并编写附加内容以更新本地网格数据。

我更喜欢你使用 option2。

我看到在这种情况下网格存在一个小问题，我们将在未来的版本中尝试修复它。

推荐阅读