Question

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

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

完全像这里：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的新手，所以我犯了很多错误，但现在我回到了以前的地方，下拉列表没有填充数据。我按照你的说法清理了代码，所以现在看起来像这样：

顺便说一句。 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期望dataUrl的HTTP'GET'请求上的服务器响应将是代表<select>的HTML片段。例如：

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

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

["Germany","USA"]

或

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

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

在the answer中，您将找到该功能的示例。

如果您的操作仅支持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属性。你可以a）重命名 'Id'至'id' b）包含其他参数jsonReader: {id: 'Id'} c）在列key: true的定义中包含其他属性'Id'。任何方式都可以解决所描述的问题。
您可以删除edittype: 'text'，sortable: true或editable: false等默认属性。请参阅jqGrid documentation，其中介绍了所有colModel属性的默认值。
您应该删除jqGrid的imgpath参数。由于许多版本的jqGrid（请参阅here）。

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

1 个答案: