jquery - jqGrid: [レコードの追加] ダイアログのドロップダウン セレクター

Question

filterToolbar のドロップダウン ボックスに動的に入力するいくつかのフィールドを持つ jqGrid があります。同じ結果を [レコードの追加] ダイアログに表示して、製品フィールドと環境フィールドにテキスト入力フィールドの代わりにドロップダウン セレクターを提供したいと考えています。ご覧のとおり、beforeShowForm イベントでこれを実行しようとしています。それはそれを行うのに適切な場所ですか？値を以前に定義した prodValues および envValues vars に設定するとよいでしょうが、必要に応じて再度 ajax リクエストを行うことができます (既に試して失敗しました)。

そのままで、コードは製品フィールドと環境フィールドの両方にテキスト入力を含むフォームを生成します。それらをセレクターに変更するにはどうすればよいですか?

$(function () {
            var grid = $("#PSGrid");

            var prodValues = $.ajax({
                url: "jqGridHandler.ashx?oper=pVals",
                async: false,
                success: function (data) {

                }
            }).responseText;

            var envValues = $.ajax({
                url: "jqGridHandler.ashx?oper=eVals",
                async: false,
                success: function (data) {

                }
            }).responseText;

            var lastsel = -1;

            // build the grid
            grid.jqGrid({
                url: 'jqGridHandler.ashx',
                editurl: 'jqGridEditor.ashx',
                datatype: 'json',
                height: 550,
                width: 'auto',
                colNames: ['ID', 'Product', 'Environment', 'Hostname', 'IP', 'Description', 'Type', 'Ports Used'],
                colModel: [
                    { name: 'ID', index: 'ID', width: 50, sortable: true, hidden: false, editable: false, key: true },
                    {
                        name: 'Product', index: 'Product', width: 125, sortable: true, editable: true,
                        stype: 'select', searchoptions: { value: prodValues, sopt: ['eq'] }
                    },
                    {
                        name: 'Environment', index: 'Environment', width: 100, sortable: true, editable: true,
                        stype: 'select', searchoptions: { value: envValues, sopt: ['eq'] }
                    },
                    { name: 'Hostname', index: 'Hostname', width: 200, sortable: true, editable: true },
                    { name: 'IP', index: 'IP', width: 125, sortable: false, editable: true },
                    { name: 'Description', index: 'Description', width: 200, sortable: true, editable: true },
                    { name: 'Type', index: 'Type', width: 75, sortable: true, editable: true },
                    { name: 'Ports Used', index: 'Ports Used', width: 80, sortable: false, editable: true }
                ],
                rowNum: 1000,    // hack to show everything; there's probably a better property to use than this
                pager: '#PSGridPager',
                sortname: 'ID',
                pgbuttons: false,
                pgtext: null,
                viewrecords: false,
                sortorder: 'asc',
                ignoreCase: true,
                caption: 'Click a row to edit.  [Enter] to save, [Esc] to cancel.',
                loadonce: true,
                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        grid.jqGrid('restoreRow', lastsel);
                        grid.jqGrid('editRow', id, true);
                        lastsel = id;
                    }
                }
            });

            grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
            grid.jqGrid('navGrid', '#PSGridPager', { edit: false, add: true, del: true, search: false, refresh: true, paging: false },
                { /* edit options */ },
                { /* add options */
                    closeOnEscape: true,
                    width: 400,
                    beforeShowForm: function (formid) {
                        $(this).setColProp('Product', { editoptions: { value: prodValues } });
                        $(this).setColProp('Environment', { editoptions: { value: envValues } });
                    }
                });
            grid.jqGrid('navButtonAdd', '#PSGridPager', {
                caption: "Export to Excel",
                onClickButton: function () {
                    grid.jqGrid('excelExport', { url: "jqGridHandler.ashx" });
                }
            });
        });