Настройка диалога добавления / редактирования в jqGrid

Question

Извините, я не могу опубликовать изображения, я слишком нов.

В диалогах добавления / редактирования jqGrid я хотел бы загрузить список выбираемых элементов на основе сделанного ранее выбора. На рисунке выше выбор значения должен быть загружен на основе значения, выбранного при выборе критериев. Я полагаю, что путь состоит в использовании dataurl в объекте editoptions, но у меня есть проблемы в этом отношении Первая проблема, которая беспокоила, была основана на документации здесь не похоже, что есть событие, доступное для запуска при изменении значения критериев, которое позволит мне обновить список значений.

Также я запутался в том, как данные должны быть возвращены из запроса ajax. В документации сказано:

Установка параметра editoptions dataUrl Параметр editoptions dataUrl действителен только для элемента edittype: select. Параметр dataUrl представляет URL-адрес, из которого должен быть получен элемент выбора html. Когда эта опция установлена, элемент будет заполнен значениями из запроса AJAX. Данные должны быть действительным элементом выбора HTML с желаемыми параметрами "

означает ли это, что мне нужно будет сгенерировать HTML и вернуть его как часть ответа? Ранее я передавал все свои данные с помощью json.

Answer 1

jqGrid не имеет простой поддержки зависимого выбора в editoptions. Таким образом, для реализации необходимо использовать событие change на главном выборе, чтобы вручную обновить список опций второго (зависимого) выбора.

В демоверсии вы найдете, как можно реализовать зависимые выборки Я использовал в демонстрационном «локальном» типе данных и установил свойство value для editoptions вместо dataUrl, но основная схема, которая должна быть сделана, осталась прежней. Более того, в демоверсии я использую не только редактирование форм, но и встроенное редактирование. Код работает в обоих случаях. Поскольку jqGrid не поддерживает локальное редактирование в режиме редактирования форм, отправка форм не работает. Я мог бы использовать приемы, которые я описал здесь , но код будет намного длиннее и будет содержать много вещей, которые далеки от вашего основного вопроса. Поэтому я решил разместить код в форме, где отправка не работает.

Ниже вы найдете код из демо:

var countries = { '1': 'US', '2': 'UK' },
    states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
    statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    statesOfUK = { '5': 'London', '6': 'Oxford' },
    // the next maps contries by ids to states
    statesOfCountry = { '1': statesOfUS, '2': statesOfUK },
    mydata = [
        { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
        { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
        { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
        { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
    ],
    lastSel = -1,
    grid = $("#list"),
    resetStatesValues = function () {
        // set 'value' property of the editoptions to initial state
        grid.jqGrid('setColProp', 'State', { editoptions: { value: states} });
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        {
            name: 'Country',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    // to have short list of options which corresponds to the country
                    // from the row we have to change temporary the column property
                    grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function (e) {
                            // build 'State' options based on the selected 'Country' value
                            var v = $(e.target).val(),
                                sc = statesOfCountry[v],
                                newOptions = '',
                                stateId,
                                form,
                                row;
                            for (stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' + stateId + '">' +
                                        states[stateId] + '</option>';
                                }
                            }

                            resetStatesValues();

                            // populate the subset of contries
                            if ($(e.target).is('.FormElement')) {
                                // form editing
                                form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // inline editing
                                row = $(e.target).closest('tr.jqgrow');
                                $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            if (lastSel !== -1) {
                resetStatesValues();
                grid.jqGrid('restoreRow', lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id) {
        if (id && id !== lastSel) {
            grid.jqGrid('restoreRow', lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.jqGrid('editRow', id, true, null, null, 'clientArray', null,
            function () {  // aftersavefunc
                resetStatesValues();
            });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    ignoreCase: true,
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true },
    { // edit options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    },
    { // add options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    });

ОБНОВЛЕНО : См. "ОБНОВЛЕНО 2" в части ответ для самой последней версии демонстрационной версии.