JQGrid не перезагрузит обновление после добавления / удаления / удаления - PullRequest
Новая
       31

JQGrid не перезагрузит обновление после добавления / удаления / удаления

0 голосов
/ 09 апреля 2020

У меня есть JQGrid, который обновляется через 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 

    [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;


    }

Любая помощь с благодарностью.

1 Ответ

1 голос
/ 10 апреля 2020

Вам не нужен этот код. 

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

Как и вы, вы делаете два ajax звонка. Если вы установили editurl в параметрах сетки или URL-адрес, как вы делаете, отредактированные данные автоматически отправляются на сервер с помощью вызова ajax вместо того, чтобы тип данных был локальным.

jqGrid ищет параметр url (editurl), а не тип данных при публикации отредактированных данных.

Удалите событие afterSubmit и протестируйте. Если данные не сохранены, вам нужно будет посмотреть, что вы разместили на сервере, а также свой код на стороне сервера для сохранения данных.

Guriddo jqGrid не зависит от сервера javascript lib, когда мы говорим о сохранении, получении, сортировке, ... данных со стороны сервера.

ОБНОВЛЕНИЕ Я понимаю, почему это вызвано. Позволь мне объяснить.

Вопрос: Как получить исходные данные?

Ответ: Вы получаете данные с помощью собственного вызова ajax, а затем передаете эти данные в таблицу с типом данных local.

Q: Как вы обновляете свои данные?

A: Вы обновляете свои данные удаленно на сервер с помощью отдельного вызова, используя встроенную функциональность jqGrid.

Проблема: если тип данных локальное и обновление на стороне сервера, обновление не отражает локальные данные в сетке с момента его перезагрузки, оно перезагружает текущие локальные данные, на которые не влияет обновление.

Как решить? У вас есть несколько вариантов.

  1. Восстановите вашу сетку так, чтобы она получала данные напрямую, используя опцию сетки url и jsonReader. Возможно, вам понадобится прочитать документы - т.е. все ваши взаимодействия с данными на стороне сервера.

  2. В случае, если вы не хотите выполнять сортировку на сервере, пейджинг и др. c. Вы можете использовать параметр сетки loadonce для true с комбинацией URL-адреса, получающего данные из сервера и jsonReader. В этом случае вам нужно будет вернуть все данные с сервера (не порциями). Если вы сделаете это, вы можете установить тип данных json в событии beforeSubmit, чтобы при перезагрузке сетки после обновления она считывала обновленные данные с сервера.

  3. Не делать измените текущую конфигурацию сетки, но в этом случае вам потребуется установить для параметра reloadAfterSubmit значение false в навигаторе и написать дополнительные для обновления данных локальной сетки.

Я предпочитаю использовать option2.

Я вижу, что в этой ситуации есть небольшая проблема с сеткой, и мы постараемся исправить ее в следующем выпуске.

...