5

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

我让 jqGrid 使用从 LINQ-to-Entities 操作创建 JSON 数据的操作。但是当我在浏览器中单击列标题时，行不会排序。上升/下降指标出现，但没有其他反应。

必要的 JavaScript 和 CSS 链接位于母版页标题中：

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- 用于 jqGrid 的 CSS 和 JavaScript 文件显示在详细信息页面上 -->
<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 设置。
$("#gridlist").jqGrid({
    url: '/联系人/GridData',
    数据类型：'json'，
    mtype: 'GET',
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'],
    col型号：[
        { 名称：'id'，索引：'id'，宽度：40，对齐：'left'，可调整大小：true }，
        { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        {名称：'last_name'，索引：'last_name'，宽度：200，对齐：'left'，可调整大小：true，可排序：true，sorttype：“text”}，
        { 名称：“组织”，索引：“组织”，宽度：300，对齐：“左”，可调整大小：true，可排序：true，排序类型：“文本”}]，
    寻呼机：jQuery（'#pager'），
    行号：5，
    行列表：[5, 10, 20, 50],
    重复项：错误，
    观看记录：真实，
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
    标题：“联系人”
});

这是HTML：

    <h3>我的网格数据</h3>
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll" style="text-align:center;">
    </div>

而且，为了完整起见，操作方法：

公共 ActionResult GridData()
{
    var page = 新 { page = 1 };

    IEnumerable 联系人 = _db.ContactSet;
    诠释 i = 0;
    var rows = new object[contacts.Count()];

    foreach（联系人中的联系人）
    {
        rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
        我++；
    }

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

    返回结果；
}

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

4

4 回答 4

4

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

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

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

于 2009-05-29T19:43:45.093 回答
2 
  I think below example should do it. 2 important points make sure your sort column has "it" keyword as prefix. (thats for linq to know). second you load only the number of objects array element as the rows the query can read.

  var context = new HaackOverflowDataContext();

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = context.Question.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var questions = context.Question.OrderBy("it."+ sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);

    int i = 0;
    var rowsObj = new object[pageSize>totalRecords ?  totalRecords : pageSize];

    foreach (Question q in questions)
    {
        rowsObj[i] = new { id = q.Id, cell = new object[] { q.Id, q.Votes, q.Title } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = rowsObj
    };

    return result;

谢谢 Anuj Pandey www.anuj.co.in

嘿嘿...这是否意味着我知道编程:)

于 2009-06-15T21:58:45.203 回答
1

好的，我应该在我弄清楚时发布这个，但我最终陷入了其他任务。这是我为报表实体实现的 LINQ to Entities 所做的工作。首先，使用默认搜索加载 jqGrid 的代码很简单（一旦我弄清楚我错过了什么）：


$(document).ready(function() {

    // Set up jqGrid for the report search results table.
    // This is displayed in a tab in the bottom section of the master page.
    $("#searchResultList").jqGrid({
        url: '/Report/GetResultsL2E/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary'],
        colModel: [
          { name: 'act', index: 'act', width: 75, sortable: false },
          { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true },
          { name: 'Title', index: 'Title', width: 150, align: 'left' },
          { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'End_Date', index: 'End_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Summary', index: 'Summary', width: 240, align: 'left' }
        ],
        pager: jQuery('#searchResultPager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Title',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/Scripts/jqGrid/themes/green/images',
        caption: 'Report Search Results', 
        editurl: "/Report/Edit",
        scroll: true,
        height: 'auto',
        recordtext: ' Reports',
        pgtext: ' of ',
        multiselect: true, 
        multiboxonly: true, //adds check box column
        altRows: true,
        loadComplete: function() {
            var ids = jQuery("#searchResultList").getDataIDs();
            for (var i = 0; i ";
                se = "";
                ce = "";
                jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce })
            }
        }
    }).navGrid('#searchResultPager',
    { edit: false, add: false, del: false, search: false }, //options 
    {height: 280, reloadAfterSubmit: false }, // edit options 
    {height: 280, reloadAfterSubmit: false }, // add options 
    {reloadAfterSubmit: false }, // del options 
    {} // search options 
    );
});

加载默认搜索集的方法返回可用报告的总集的第一页：

///
/// 查询 ReportSet 以返回一个分页、排序的报表实体属性集，以响应来自视图的调用。
///
/// 用于排序的列的名称。
/// 排序的顺序（升序或降序）。
/// 返回调用进程的页数。
/// 要为页面返回的行数。
/// 此 ActionResult 返回一个 JSON 结果，供使用 jQuery 库的 jqGrid 使用。
/// jQuery 需要一个脚本标签来链接 jQuery.js 脚本。
/// jqGrid 需要指向以下脚本和样式表的样式表链接：
///
/// jQuery/themes/base/ui.all.css
/// jqGrid/themes/green/grid.css（或其他主题CSS文件）
/// jqGrid/jquery.jqGrid.js
/// jqGrid/grid.base.js
/// jqGrid/js/jqModal.js
/// jqGrid/js/jqDnR.js
///
public ActionResult GetResultsL2E(string sidx, string sord, int page, int rows)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = 行；
    int totalRecords = _db.ReportSet.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
    int startRecord = pageIndex * pageSize;

    列表 rowStrings = new List();
    // 以固定顺序获取模型中的所有报表（用于比较）。
    //var reports = from item in _db.ReportSet
    // orderby item.Start_Date, item.Title
    // 选择新的 { item.ID, item.Title, item.Post_Date,
    // item.Start_Date, item.End_Date, item.Summary };
    // 以从 jqGrid 传递的动态顺序获取模型中的所有报表。
    字符串 orderBytext = "";
    orderBytext = string.Format("it.{0} {1}", sidx, sord);
    var 报告 = _db.ReportSet
                   .OrderBy(orderBytext);

    列表 stringList = new List();

    int 计数器 = 报告.Count();
    foreach（报告中的 var 报告）
    {
        var 行字符串 = 新
        {
            id = 报告.ID,
            细胞 = 新 [] {
                    "",
                    报告.ID.ToString(),
                    报告.标题,
                    报告.Post_Date.ToShortDateString(),
                    report.Start_Date.ToShortDateString(),
                    报告.End_Date.ToString(),
                    报告.Summary.ToString()}
        };
        stringList.Add(rowString);
    }

    var rowsOut = 新对象[计数器];
    对于 (int i = 0; 我

我后来添加了另一种方法来响应用户选择要排序的列，使用从 Albaharis 的书 C# 中讨论的 PredicateBuilder 在 Nutshell 的动态组合表达式谓词部分。我在一个问题中讨论了我的解决方案

于 2009-06-16T14:34:09.100 回答
0

我在 jqGrid 框架出现但行没有出现的地方遇到了同样的问题。我的解决方案是添加以下代码。

**jsonData.JsonRequestBehavior = JsonRequestBehavior.AllowGet;**
         return jsonData;
于 2010-09-01T07:23:19.460 回答