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

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 属性以及模型上的其他所有内容都在 Controller 中设置。 Controller 还有一个方法 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 上可用，擅长封装从 Controller 返回 JSON 到网格所需的数据格式。对于将来遇到此问题的任何人......

Controller :

[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};
}

然后，下拉列表将在部分 View 中填充，模型为 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。