使用jQuery和LINQ-to-Entities在ASP.NET MVC客户端视图中对jqGrid进行排序

Question

我是一个jQuery noob,所以我确定我在这里缺少一些简单的东西.

我已经让jqGrid处理了一个从LINQ到实体操作创建JSON数据的操作.但是,当我单击浏览器中的列标题时,行不会排序.上升/下降指示器显示,但没有其他任何事情发生.

必要的JavaScript和CSS链接位于主页面标题中:

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- CSS and JavaScript files for jqGrid to display on Details pages -->
<link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" />
<script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"></script>

这是我的初始化代码:

// jqGrid setup.
$("#gridlist").jqGrid({
    url: '/Contact/GridData',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'],
    colModel: [
        { name: 'id', index: 'id', width: 40, align: 'left', resizable: true },
        { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}],
    pager: jQuery('#pager'),
    rowNum: 5,
    rowList: [5, 10, 20, 50],
    repeatitems: false,
    viewrecords: true,
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
    caption: 'Contacts'
});                  

这是HTML:

    <h3>My Grid Data</h3>
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll" style="text-align:center;">
    </div>

并且,为了完整性,动作方法:

public ActionResult GridData()
{
    var page = new { page = 1 };

    IEnumerable contacts = _db.ContactSet;
    int i = 0;
    var rows = new object[contacts.Count()];

    foreach (Contact contact in contacts)
    {
        rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new { page = 1, records = 2, rows, total = 1 };

    return result;
}

任何想法我在这里缺少什么明显的设置？

Answer 1

有两种基本方法可以处理这个问题。网格可以对数据本身进行排序。我不记得如何打开它，因为我从来没有使用过这个选项。通常，我处理的数据集太大而无法返回页面，因此我使用网格的分页功能。这需要在服务器上进行这种排序，因为网格不会看到整个数据集。

要在服务器上进行分页，请将 sidx 和 sord （都是字符串）参数添加到您的操作中。sidx 将是要排序的列的名称。sord 将是方向，asc 或 desc。

我有一个演示项目，它展示了如何执行此操作（使用 LINQ to Objects）。但使用 LINQ to Entities 几乎是相同的；我在生产/非演示代码中使用 LINQ to Entities。下载演示解决方案并自行查找。