jqGrid 将字段从文本切换为下拉列表

我有一个 jqGrid，其中有一些列，其中 1 列是从数据库填充的下拉列表（选择）。

我想要的是：当我不在带有下拉列表的编辑模式列时，只需显示必须从查询中获取的文本，而当我处于编辑模式时，它应该显示下拉列表。

就像这里一样：http://www.trirand.com/blog/jqgrid/jqgrid.html 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>

附：我一回家就链接代码

UPDATED：谢谢你的回答，我是jq新手，所以我犯了很多错误。但现在我回到了以前的位置，下拉列表没有填充数据。我按照你说的清理了代码，所以现在看起来像这样：

顺便提一句。 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

但我仍然有一个问题，它从一开始就没有显示哪些卖家已被选择！

好吧，重启后它神秘地工作了......现在已经解决了

你需要做的是使用

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

代替

editoptions: { value: data }

取决于操作的输出格式ConstructSelect您可能需要使用额外的属性buildSelect of the editoptions。 jqGrid 期望服务器响应 HTTP 'GET' 请求dataUrl将是代表的 HTML 片段<select>。例如：

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

如果服务器返回其他格式的数据，例如JSON数据

["Germany","USA"]

or

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

您可以编写 JavaScript 函数，将服务器响应转换为 HTML 片段<select>并设置属性的值buildSelect到函数。

In 答案 https://stackoverflow.com/questions/4101116/asp-net-mvc-post-call-returning-string-need-help-with-format-for-jqgrid/4102155#4102155您将找到该函数的示例。

如果您的操作仅支持 HTTP POST 而没有 GET，您将不得不使用ajaxSelectOptions: { type: "POST" }另外，要覆盖相应参数的类型ajax要求。同样的方法也可以覆盖其他的ajax参数。例如你可以使用

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

（默认值是type : "GET" and dataType: "html")

对代码的一些其他小注释：

• 你不应该放置$(document).ready(function () {在另一个里面$(document).ready(function () {.
• You use 'Id'代替'id'。所以jqGrid不会找到 the id财产。您可以 a) 重命名'Id' to 'id'b) 包括附加参数jsonReader: {id: 'Id'}c) 包括附加属性key: true在列的定义中'Id'。任何一种方式都可以解决所描述的问题。
• 您可以删除默认属性，例如edittype: 'text', sortable: true or editable: false. See jqGrid 文档 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options它描述了所有的默认值colModel特性。
• 你应该删除imgpathjqGrid的参数。该参数不存在，因为 jqGrid 的许多版本（请参阅here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:upgrade_from_3.4.x_to_3.5#options).