jqGrid列与模拟Html.DropDownListFor选择列表

Question

我试图使用jqGrid的相当复杂的用户界面。网格最终需要有一个下拉列，一个自动完成和一个按钮列。目前，我无法确定如何设置一个包含select列的列，该列在我的模型中填充IEnumerable的值，设置来自模型属性的初始选定值，并在用户更改时更改该属性列表的值为select。例如，说我有这些模型：

public class GridRowModel 
{ 
    public int GridRowModelId { get; set; } 
    public string SomeText { get; set; } 
    public int SomeSelectOptionId { get; set; } 
} 

public class SelectOption 
{ 
    public int SomeSelectOptionId { get; set; } 
    public string Description { get; set; } 
} 

public class SomeModel { 
    public int SomeModelId { get; set; } 
    public IEnumerable<GridRowModel> GridRowModels { get; set; } 
    public IEnumerable<SelectOption> AllSelectOptions { get; set; } 
} 

的SomeModel的AllSelectOptions属性被设置在控制器，与模型其他事情一样。控制器还有一个方法GetSomeModelGridRows，返回jqGrid rows的GridRowModel对象数组。然后，我有剃刀，看起来是这样的：

@model SomeModel 
<table id="someModelGridRows" cellpadding="0" cellspacing="0"></table> 
<div id="pager" style="text-align: center;"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#someModelGridRows").jqGrid({ 
      url: '@Url.Action("GetSomeModelGridRows")', 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['GridRowModelId', 'Text', 'Select Option'], 
      colModel: [ 
       { name: 'GridRowModelId', index: 'GridRowModelId', hidden: true }, 
       { name: 'SomeText', index: 'SomeText' }, 
       { name: 'SomeSelectOptionId', index: 'SomeSelectOptionId', edittype: 'select', 

**?? is this where I would do something and if so, what ??** 

      ], 
      //the rest of the grid stuff 
     }); 
    }); 
</script> 

在非电网的情况下，这将使用Html.DropDownListFor帮手简单。有什么方法可以在此使用？我是否会以这种错误的方式去做这件事，甚至有可能吗？

Answer 1

我想我想通了使用TPeczek的Lib.Web.Mvc and his very helpful sample project。 Lib.Web.Mvc在Nuget上可用，并擅长封装将JSON从控制器返回到网格所需的数据格式。对于任何人谁在未来有这个问题....

控制器：

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult GetClientContactsAndProviders(JqGridRequest request) 
{ 
    var clientId = CookieHelper.GetClientIdCookieValue(); 
    var contacts = _clientRepo.GetContactsForClient(clientId).ToList(); 
    //I do not want paging, hence TotalPagesCount = 1. 
    //PageIndex increments automatically in JqGridResponse, so start at 0. 
    var response = new JqGridResponse 
         { 
          TotalPagesCount = 1, 
          PageIndex = 0, 
          TotalRecordsCount = contacts.Count 
         }; 
    foreach(var contact in contacts) 
    { 
     response.Records.Add(new JqGridRecord(contact.Id.ToString(), 
               new List<object> 
                { 
                 contact.Id, 
                 contact.ClientId, 
                 contact.ClientContactId, 
                 contact.ContactId, 
                 contact.ContactTypeId, 
                 contact.Description, 
                 contact.ContactName, 
                 contact.ContactPhone, 
                 string.Empty, 
                 contact.ContactComments 
                })); 
    } 
    return new JqGridJsonResult {Data = response}; 
} 

然后，在下拉列表中填充的局部视图的Dictionary<int, string>模型：

@model Dictionary<int, string> 
<select> 
    <option value=""></option> 
    @foreach(KeyValuePair<int, string> value in Model) 
    { 
     <option value="@value.Key.ToString()">@value.Value</option> 
    } 
</select> 

写一个Action返回在部分的词典：

public ActionResult ContactTypes() 
{ 
    var contactTypes = new Dictionary<int, string>(); 
    var allTypes = _cacheService.Get("contacttypes", _contactRepo.GetAllContactTypes); 
    allTypes.ToList().ForEach(t => contactTypes.Add(t.ContactTypeId, t.Description)); 
    return PartialView("_SelectList", contactTypes); 
} 

最后，电网本身（剃刀），与下拉列表中Type列定义：

$(document).ready(function() { 
    $("#clientContacts").jqGrid({ 
     url: '@Url.Action("GetClientContactsAndProviders")', 
     datatype: 'json', 
     mtype: 'POST', 
     cellEdit: true, 
     cellsubmit: 'clientArray', 
     scroll: true, 
     colNames: ['Id', 'ClientId', 'ClientContactId', 'ContactId', 'HiddenContactTypeId', 'Type', 'Who', 'Phone', '', 'Comments'], 
     colModel: [ 
      { name: 'Id', index: 'Id', hidden: true }, 
      { name: 'ClientId', index: 'ClientId', hidden: true }, 
      { name: 'ClientContactId', index: 'ClientContactId', hidden: true }, 
      { name: 'ContactId', index: 'ContactId', hidden: true }, 
      { name: 'HiddenContactTypeId', index: 'HiddenContactTypeId', hidden: true }, 
      { 
       name: 'Type', 
       index: 'ContactTypeId', 
       align: 'left', 
       width: 180, 
       editable: true, 
       edittype: 'select', 
       editoptions: { 
        dataUrl: '@Url.Action("ContactTypes")', 
        dataEvents: [ 
         { 
          type: 'change', 
          fn: function (e) { 
           var idSplit = $(this).attr('id').split("_"); 
           $("#clientContacts").jqGrid('setCell', idSplit[0], 'HiddenContactTypeId', $(this).attr('value'), '', ''); 
          } 
         } 
        ] 
       }, 
       editrules: { required: true } 
      }, 
      { name: 'Who', index: 'ContactName', width: 200, align: 'left', editable: true, edittype: 'text' }, 
      { name: 'Phone', index: 'ContactPhone', width: 100, align: 'left', editable: false }, 
      { name: 'Button', index: 'Button', width: 50, align: 'center' }, 
      { name: 'Comments', index: 'ContactComments', width: 240, align: 'left', editable: true, edittype: 'text' } 
     ], 
     pager: $("#pager"), 
     rowNum: 20, 
     sortname: 'Id', 
     sortorder: 'asc', 
     viewrecords: true, 
     height: '100%' 
    }).navGrid('#pager', { edit: false, add: true, del: false, search: false, refresh: false, addtext: 'Add Contact/Provider' }); 
}); 

希望这有助于再次在未来的某个人，并感谢@TPeczek。