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

AllSelectOptions SomeModel属性在控制器中设置，以及模型上的其他所有内容。控制器还有一个方法GetSomeModelGridRows，它返回jqGrid GridRowModel的{{1}}个对象数组。然后，我的Razor看起来像这样：

rows

在非网格情况下，使用@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>帮助程序很简单。有没有办法在这里使用它？我是否会以错误的方式解决这个问题和/或这是否可能？

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。

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

1 个答案: