javascript - jqGrid不在网格中显示数据

在ASP.NET MVC 3.0应用程序中，我使用jqGrid。我使用下面的代码。我看到了网格，但是没有数据。我通过了“ GridData”操作，列表内容是一个元素，但是网格中什么也没有。

C＃ ：

public ActionResult GridData()
{

    List<Customer> list = new List<Customer>();
    list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

    return Json(list);
}

HTML：

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqgProducts').jqGrid({
            //url from wich data should be requested
            url: '/Customer/GridData/',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'GET',
            //columns names
            colNames: ['Id', 'LastName','FirstName', 'Code'],
            //columns model
            colModel: [
                  { name: 'Id', index: 'Id', align: 'left' },
                  { name: 'LastName', index: 'LastName', align: 'left' },
                  { name: 'FirstName', index: 'FirstName', align: 'left' },
                  { name: 'Code', index: 'Code', align: 'left' }
                ],
            //pager for grid
            pager: $('#jqgpProducts'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'Id',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true
        });
    });
</script>

最佳答案

首先，您应该使用JsonRequestBehavior.AllowGet作为jqGrid的第二个参数从MVC操作返回JSON数据。

接下来，主要问题是数据格式。有等待jqGrid的默认数据格式。格式在the documentation中描述。因此，您可以按照Saad建议的标准格式生成JSON数据，也可以在jqGrid中添加jsonReader参数，该参数将描述如何读取当前JSON数据。因此，使用几乎相同的GridData：

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };

    return Json (list, JsonRequestBehavior.AllowGet);
}

您可以添加以下jsonReader参数

jsonReader: {
    id: "Id",
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.length; }
}

读取数据。 you，您可以在上面的代码中看到我向Id类添加了Customer属性。该属性可以是整数字符串。两者对于jqGrid都是可以的。 Id值将被保存两次：一次是作为网格行的id元素的<tr>，一次是作为第一表列的<td>元素。如果您永远不需要显示用户的ID，则可以从网格中删除Id列，但仍可以将id放在JSON数据中。如果您使用非唯一ID，则可能会遇到与上述here相同的问题。

另一种方法是更改​​MVC Action的代码，以便它以默认格式生成JSON数据。为此，您可以将GridData的代码更改为以下代码：

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };
    return Json (new {
        page = 1,
        total = 1,
        records = list.Count,
        rows = (from x in list
                orderby x.Id
                select new {
                    id = x.Id,
                    cell = new[] {
                        x.Code,
                        x.FirstName,
                        x.LastName
                    }
                }
        )
    }, JsonRequestBehavior.AllowGet);
}

上面包含的所有代码仅是为了理解jqGrid基础。在上面的代码中，数据将按Id排序，该sortname: 'Id'对应于jqGrid中使用的sidx。该名称将作为sortorder: 'asc'参数发送到服务器。另外，jqGrid的参数rowNum: 10和sord将定义操作的rows和page参数的值。发送到服务器的最后一个参数最初将设置为1，如果用户选择下一页，则将增加该参数。因此，MVC动作的典型原型是

public ActionResult GridData (string sidx, string sord, int page, int rows)

我建议您阅读the old answer和下一个answer的UPDATED部分。我希望答案能使您对jqGrid的使用有所了解。 Here您将找到以下问题的答案：为什么jqGrid等待的JSON数据的默认格式看起来如此奇怪。