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 作为 jqGrid 的第二个参数从 MVC 操作返回 JSON 数据。

接下来，主要问题是数据格式。有等待 jqGrid 的默认数据格式。格式在the documentation 中描述。因此，您可以生成标准格式的 JSON 数据，例如 Saad 建议的格式，或者将 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 属性添加到Customer 类。该属性可以是一个整数字符串。对于 jqGrid，两者都可以。 Id 值将被保存两次：一次作为网格行的<tr> 元素的id，一次作为第一个表格列的<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 排序，这对应于您在jqGrid 中使用的sortname: 'Id'。该名称将作为sidx 参数发送到服务器。此外，jqGrid 的参数sortorder: 'asc' 和rowNum: 10 将定义动作的sord 和rows 参数的值。发送到服务器的最后一个参数page 最初将设置为1，如果用户选择下一页，则会增加。所以典型的MVC动作原型是

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

我建议您阅读the old answer 和下一个answer 的更新部分。我希望这些答案能让您在 jqGrid 的使用方面取得进步。 Here你会在这个问题上找到答案：为什么jqGrid等待的JSON数据的默认格式看起来很奇怪。

Answer 2

我们还在 project 中使用 jqGrid。检查这两个链接：controller(LoadApplicationGrid) 和view。还有here我们的 JQGridView 自定义 Json 结果。

另外，您可以使用JsonRequestBehavior.AllowGet 允许对Json 结果的GET 方法，然后直接从浏览器调用该操作并将序列化数据与jqGrid 要求进行比较。

Answer 3

我认为您的控制器在GridData() 中引发了异常，因为默认情况下 MVC3 不允许 JSON 响应 GET 请求。 您可以像这样修改此行为：

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

    return Json(list, JsonRequestBehavior.AllowGet);
}

Answer 4

试试这个代码段。我总是创建一个 JqgridRow 以在 Json 中返回。

public ActionResult GridData()

{

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

var GetData = new
                {
                    rows = (from x in list 
                            select new JqGridRow()
                            {
                                cell = new string[] {
                                    x.Code.ToString(),
                                    x.FirstName.ToString(),
                                    x.LastName .ToString(),
                                }
                            }
                            ).ToArray()
                };

return Json(GetData , JsonRequestBehavior.AllowGet);

}

希望对你有所帮助..