jqGrid切换字段从文本下拉

Question

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

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

酷似这里：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> 

附：谢谢你的回答，进出口新的JQ，失误使即时制作了很多OFC，但我现在回到我原来所在之处，在下拉列表是：只要我回来家里

修订生病链接代码没有填充数据。我按照你所说的清理了代码，所以现在看起来像这样：

btw。该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; 

aparently u必须告诉buildselect，美要修改的数据是字符串

但我仍然有问题，它不显示从开始哪些卖家已被选中！

好重启后mysticly工作...现在是解决

Answer 1

你需要做的是使用

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

，而不是

editoptions: { value: data } 

依靠的格式动作ConstructSelect的输出可能需要使用editoptions的附加属性buildSelect。 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"}] 

，你可以写一个转换的服务器响应HTML片段JavaScript函数的<select>，并将属性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）在列'Id'的定义中包含附加属性key: true。任何方式都将解决所描述的问题。
• 您可以删除默认的属性，如edittype: 'text'，sortable: true或editable: false。请参阅jqGrid documentation，其中描述了所有colModel属性的默认值。
• 您应该删除jqGrid的imgpath参数。该参数不存在，因为许多版本的jqGrid（参见here）。