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

Question

在 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>

Answer 1

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

您接下来的主要问题是数据格式。有等待jqGrid的默认数据格式。 the documentation 中描述了格式.因此，您可以像 Saad 建议的那样以标准格式生成 JSON 数据，或者添加 jsonReader jqGrid 的参数，它将描述如何读取当前的 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; }
}

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

另一种方法是更改​​ MVC 操作的代码，以便它以默认格式生成 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'和 rowNum: 10 jqGrid 的将定义 sord 的值和 rows Action 的参数。最后一个参数page发送到服务器的值最初设置为 1，如果用户选择下一页，该值将增加。所以典型的MVC Action 原型(prototype)是

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

我推荐你阅读the old answer和下一个 answer 的更新部分.我希望这些答案能使您在使用 jqGrid 时有所进步。 Here您会找到问题的答案:为什么 jqGrid 等待的 JSON 数据的默认格式看起来很奇怪。