带有模拟 Html.DropDownListFor 的选择列表的 jqGrid 列

Question

我正在尝试将 jqGrid 用于相当复杂的 UI。网格最终需要有一个下拉列、一个自动完成和一个按钮列。现在，我无法弄清楚如何设置一个带有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 对象数组。然后，我的 Razor 看起来像这样：

@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);
}

最后是网格本身（Razor），下拉列表定义在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。