jqgrid不渲染数据 - 标题可见

Question

当与JQGrid一起玩时，我遇到了以下问题。 JQGrid中的数据没有得到渲染。即使我能够看到所有列的网格标题，但没有显示数据。我正在以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>

控制器中的Action方法：

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

        contacts.Add ( new Contact()
            {
                FirstName = "John",
                LastName = "Doe",
                Email = "[email protected]"
            }
        );



        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

记录选项卡输出显示由呼叫方法返回的JSON数据“ contactList”返回的屏幕截图。

也正在渲染JQGrid标头，但是Controller的操作方法返回的数据（以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");

            });

        });

您使用

非常旧版本

。它没有输入格式的自动检测。因此，您必须指定哪个准确与您的数据相关。至少需要至少两个therm的属性：

Answer 1

上面的设置应解决主要问题。此外，应该了解JQGrid分配jsonReader属性到每个行（每个元素）。如果您稍后实现JQGrid的其他功能（例如编辑），则需要通过ID标识行。因此，严格建议在输入数据中包含

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

属性。如果您具有带有其他名称的对象的本机ID（例如，

id

或

<tr>

），则可以指定

id

内部的其他

Contact

属性（如

"Id"

或

"ContactId"

）。您也应该在服务器响应中包含相应的属性。

我建议您考虑将JQGrid更新为最新的

jqgrid

（或至少为

FreeJQGrid4.8

）。您可以阅读有关readme

和wiki

中免费JQGrid功能的更多信息。免费JQGrid是我开发的JQGrid的叉子。
    

我认为我正在犯另一个错误。我忘了将btncontactlist包装在双引号中。在Internet Explorer进行调试后，我发现了这一点。其次，正如@oleg建议的那样，需要JSONREADER属性。可能是因为我正在使用的JQGrid版本。

id