jqGrid 不呈现数据 - Headers 可见

Question

在使用 jqGrid 时，我运行遇到了以下问题。 jqGrid 中的数据没有被渲染。即使我能够看到包含所有列的网格的 header，但数据没有出现。我正在以 JSON 格式从控制器的操作方法返回数据。

<script type="text/javascript">
        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {
                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [
                        //{ name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    //loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        root: "rows",
                        page: "page",
                        id: 0

                    }
                });
                alert("complete - success");
           });

        });


 </script>

控制器中的动作方法：

public JsonResult ContactList()
    {
        List<Contact> contacts = new List<Contact>();

        contacts.Add ( new Contact()
            {
                FirstName = "John",
                LastName = "Doe",
                Email = "john.doe@gmail.com"
            }
        );



        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

网络选项卡输出显示调用 Action 方法 'ContactList' 返回的 JSON 数据，如下面的屏幕截图所示。

jqGrid header 也正在呈现，但是 Controller 的 Action 方法返回的数据（JSON 格式）没有呈现到 jqGrid 中。

我哪里出错了？

即使按照@Oleg 在下面评论中的建议修改代码后，问题仍然存在。没有错误。来自 'loadComplete' 事件的警报弹出。

<script type="text/javascript">

        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {



                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [

                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }
                });
                alert("complete - success");

            });

        });

Answer 1

您使用非常旧的版本。它没有自动检测输入格式。因此，您必须指定 jsonReader 与您的数据完全对应。 jsonReader 的至少两个属性是真正需要的：

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; } 
}

以上设置应该可以解决主要问题。另外，应该理解 jqGrid 将 id 属性分配给每一行（每个 <tr> 元素）。如果您稍后要实现 jqGrid 的其他功能（例如编辑），您将需要通过 id 识别行。因此，强烈建议在输入数据中包含 id 属性。如果您有 Contact 对象的本机 ID 和另一个名称（例如 "Id" 或 "ContactId"），您可以在 [= 中指定额外的 id 属性 11=]（如 id: "Id" 或 id: "ContactId"）。您也应该在服务器响应中包含相应的属性。

我建议您考虑将 jqGrid 更新到最新版本 free jqGrid (or at least to free jqGrid 4.8). You can read more about the features of free jqGrid in the readme and in wiki。 Free jqGrid 是我开发的 jqGrid 的分支。

Answer 2

终于成功了。谢谢@Oleg！我在这里看到另一个 post http://goo.gl/Pg5CMn

此外，我认为我又犯了一个错误。我忘了用双引号将 btnContactList 括起来。在 Internet Explorer 中调试后，我发现了这一点。其次，正如@Oleg 建议的那样，jsonReader 属性是必需的。可能是因为我使用的 jqGrid 版本。

<script type="text/javascript">
            $(document).ready(function () {
            //alert("this is a test");
            $("#btnContactList").click(function () {

                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["ID", "First Name", "Last Name", "EMail"],
                    colModel: [
                        { name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        repeatitems: false,
                        //page: function () { return 1; },
                        root: function (obj) { return obj; },
                        //records: function (obj) { return obj.length; }
                    },
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }

                });
                alert("after completion");

            });


        });
</script>

jqGrid 不呈现数据 - Headers 可见

jqGrid not rendering data - Headers visible

asp.net-mvc

jquery

json

jqgrid