2

かなり複雑なUIに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; }
}

のAllSelectOptionsプロパティはSomeModel、モデル上の他のすべてのものとともに、コントローラーで設定されます。コントローラには、jqGridGetSomeModelGridRowsのオブジェクトの配列を返すメソッドもあります。次に、次のようなRazorがあります。GridRowModelrows

@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ヘルパーを使用すると簡単です。ここでこれを使用する方法はありますか？私はこれをすべて間違った方法で行っていますか、および/またはこれは可能ですか？

4

1 に答える 1

2

TPeczekのLib.Web.Mvcと彼の非常に役立つサンプルプロジェクトを使用してこれを理解したと思います。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辞書を部分的に返すanを記述します。

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に感謝します。

于 2012-05-24T13:32:11.397 に答える