JQGrid: Как я могу обновить выпадающий список после редактирования?

Question

В моем приложении я использую JQGrid для загрузки некоторых данных о контактах, и когда я редактирую / добавляю запись, я выбираю имя контакта из базы данных, а затем обновляю / добавляю контакт.

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

Мой код:

для colModel:

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} },

Я заполняю раскрывающийся список в выбранной строке (чтобы при выборе строки раскрывающийся список обновлялся)

onSelectRow: function (id) {
                var advOwners = $.ajax({
                    type: 'POST',
                    data: {},
                    url: 'MyWebService.asmx/GetOwners',
                    async: false,
                    error: function () {
                        alert('An error has occured retrieving Owners!');
                    }
                }).responseXML;

                var aux = advOwners.getElementsByTagName("string");
                ownersList = "";
                for (var i = 0; i < aux.length; i++) {
                    ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; ';
                }
                ownersList = ownersList.substring(0, ownersList.length - 2);

                jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} });
             }

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

Любая помощь?

Спасибо, Джефф

Answer 1

Думаю, будет лучше, если вы используете dataUrl свойство editoptions вместо использования value.В этом случае вам не нужно будет использовать синхронный вызов Ajax внутри onSelectRow, чтобы получить данные выбора вручную.Если данные понадобятся, соответствующий вызов выполнит для вас jqGrid.

URL-адрес из dataUrl должен возвращать фрагмент HTML для элемента <select>, включая все <options>.Таким образом, вы можете преобразовать любой другой ответ из dataUrl в требуемый формат, реализуя соответствующую функцию обратного вызова buildSelect.

На вашем месте я бы предпочел возвращать данные JSON из URL-адреса 'MyWebService.asmx / GetOwners'вместо XML-данных, которые вы в настоящее время делаете.В простейшем случае это может быть веб-метод, подобный

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetSelectData() {
    return new List<string> {
        "User1", "User2", "User3", "User4"
    };
}

. Если вы будете использовать HTTP GET вместо HTTP POST, вам следует запретить использование данных из кэша, установив Cache-Control: private, max-age=0 в заголовке HTTP.соответствующий код будет

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public List<string> GetSelectData() {
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
    return new List<string> {
        "User1", "User2", "User3", "User4"
    };
}

По умолчанию jqGrid использует dataType: "html" в соответствующем вызове Ajax (см. исходный код ).Чтобы изменить поведение на dataType: "json", contentType: "application/json", вы должны дополнительно использовать параметр ajaxSelectOptions в jqGrid как

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' },

или как

ajaxSelectOptions: {
    contentType: "application/json",
    dataType: 'json',
    type: "POST"
},

, если вы будете использовать HTTP POST, который используется по умолчанию дляВеб-сервисы ASMX.

Соответствующая настройка для столбца в colModel будет

edittype: 'select', editable: true,
editoptions: {
    dataUrl: '/MyWebService.asmx/GetSelectData',
    buildSelect: buildSelectFromJson
}

, где

var buildSelectFromJson = function (data) {
        var html = '<select>', d = data.d, length = d.length, i = 0, item;
        for (; i < length; i++) {
            item = d[i];
            html += '<option value=' + item + '>' + item + '</option>';
        }
        html += '</select>';
        return html;
    };

Будьте осторожны, чтобы приведенный выше код использовал data.d, что требуется в случае веб-сервисов ASMX.Если вы мигрируете в ASP.NET MVC или в WCF, вам нужно будет удалить использование свойства d и использовать data напрямую.

ОБНОВЛЕНО : Здесь Вы можете скачать демонстрационный проект VS2010, который реализует то, что я написал выше.