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

Question

我是一个 jQuery 菜鸟，所以我确信我在这里遗漏了一些简单的东西。

我已经让 jqGrid 与一个操作一起使用，该操作从 LINQ-to-Entities 操作创建 JSON 数据。但是当我单击浏览器中的列标题时，行不会排序。升序/降序指示器显示，但没有其他 react 。

必要的 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。

我有a demo project其中显示了如何执行此操作(使用 LINQ to Objects)。但使用 LINQ to Entities 几乎是相同的；我在生产/非演示代码中使用 LINQ to Entities。下载演示解决方案并自行查找。