jqGrid Переключить поле в раскрывающийся список из текста

Question

У меня есть jqGrid, где у меня есть несколько столбцов, а 1 из столбцов представляет собой выпадающий список (выбрать), заполненный из базы данных.

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

точно так же, как здесь: http://www.trirand.com/blog/jqgrid/jqgrid.html перейти к редактированию строк / вводу tipyes

вот код моей сетки:

<script type="text/javascript">
    var lastsel;

    $(document).ready(function () {
        $.getJSON('@Url.Action("ConstructSelect")', function (data) {
            setupGrid(data);
        });
    });
    function setupGrid(data) {
        jQuery(document).ready(function () {
            jQuery("#list").jqGrid({

                url: '@Url.Action("GetStoreList")',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],

                colModel: [
                        { name: 'Id', index: 'Id', width: 50 },
                        { name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],


                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        jQuery('#list').jqGrid('restoreRow', lastsel);
                        jQuery('#list').jqGrid('editRow', id, true);
                        lastsel = id;

                    }
                },
                editurl: '@Url.Action("GridSave")',
                rowNum: 50000,
                rowList: [5, 10, 20, 50],
                pager: '#page',
                sortname: 'Id',
                sortorder: "desc",
                viewrecords: true,
                height: "500px",
                imgpath: '/scripts/themes/base/images'
            });
            jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
        });
    }
</script>

P.S. Я буду ссылаться на код, как только я вернусь домой

ОБНОВЛЕНО : Спасибо за ответ, я новичок в jq, поэтому я делаю много ошибок c., Но теперь я вернулся туда, где был раньше, выпадающий список не заполнен данными. Я убрал код, как ты сказал, так что теперь это выглядит так:

кстати. ConstructSelect возвращает список строк

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '@Url.Action("GetStoreList")',
        ajaxSelectOptions: { type: "POST", dataType: "json" },
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
        colModel: [
            { name: 'Kategori', index: 'Kategori', width: 50, key: false},
            { name: 'Navn', index: 'Navn', align: 'center', editable: false },
            { name: 'By', index: 'By', align: 'center', editable: false },
            { name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
                editoptions: { dataUrl: '@Url.Action("ConstructSelect")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data.responseText);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        }],
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("GridSave")',
        rowNum: 50000,
        rowList: [5, 10, 20, 50],
        pager: '#page',
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        height: "900px"
    });
    jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});

Хорошо, для его работы потребовались небольшие изменения:

var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;

очевидно, вы должны указать buildselect, что данные, которые вы хотите изменить, это String

Но у меня все еще есть проблема, из-за которой он не показывает, какие продавцы уже выбраны!

Хорошо, после перезапуска это мистическим образом сработало ... теперь оно решено

Answer 1

Что вам нужно сделать, это использовать

editoptions: { dataUrl: '@Url.Action("ConstructSelect")' }

вместо

editoptions: { value: data }

В зависимости от формата вывода действия ConstructSelect вам может понадобиться использовать дополнительное свойство buildSelect из editoptions. jqGrid ожидал, что ответом сервера на запрос HTTP 'GET' dataUrl будет фрагмент HTML, представляющий <select>. Например:

<select>
    <option value="de">Germany</option>
    <option value="us">USA</option>
</select>

Если сервер возвращает другие отформатированные данные, например данные JSON

["Germany","USA"]

или

[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]

Вы можете написать функцию JavaScript, которая преобразует ответ сервера во фрагмент HTML <select> и устанавливает значение свойства buildSelect для функции.

В ответе вы найдете пример функции.

Если ваше действие поддерживает только HTTP POST и не GET, вам придется дополнительно использовать параметр ajaxSelectOptions: { type: "POST" }, чтобы перезаписать тип соответствующих запросов ajax. Таким же образом вы можете перезаписать другие ajax параметры. Например, вы можете использовать

ajaxSelectOptions: { type: "POST", dataType: "json"}

(по умолчанию type : "GET" и dataType: "html")

Некоторые другие небольшие замечания к коду:

• вы не должны помещать $(document).ready(function () { внутрь другого $(document).ready(function () {.
• Вы используете 'Id' вместо 'id'. Так что jqGrid не найдет свойство id. Вы можете а) переименовать 'Id' - 'id' b) включить дополнительный параметр jsonReader: {id: 'Id'} c) включить дополнительное свойство key: true в определение столбца 'Id'. Любой из способов решит описанную проблему.
• Вы можете удалить свойства по умолчанию, такие как edittype: 'text', sortable: true или editable: false. См. документацию jqGrid , в которой описаны значения по умолчанию для всех colModel свойств.
• Вы должны удалить imgpath параметр jqGrid. Параметр не существует, так как многие многие версии jqGrid (см. здесь ).