jqGrid无法呈现数据 – 标题可见

在玩jqGrid时，我遇到了以下问题。 jqGrid中的数据未呈现。 即使我能够看到所有列的网格标题，但数据不会出现。 我以JSON格式从控制器的action方法返回数据。

 $(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"); }); });  

控制器中的动作方法：

 public JsonResult ContactList() { List contacts = new List(); contacts.Add ( new Contact() { FirstName = "John", LastName = "Doe", Email = "[e-mail]" } ); return Json(contacts, JsonRequestBehavior.AllowGet); } 

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

jqGrid标头也被渲染，但Controller的Action方法返回的数据（以JSON格式）不会渲染到jqGrid中。

我在哪里弄错了？

即使在@Oleg在下面的评论中修改代码之后，问题仍然存在。 没有错误。 弹出“loadComplete”事件的警报。

  $(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属性。 如果您稍后将实现jqGrid的其他function（例如编辑），则需要按ID标识行。 因此，严格建议在输入数据中包含id属性。 如果您的Contact对象的本机ID具有其他名称（例如"Id"或"ContactId" ），则可以在jsonReader指定其他id属性（作为id: "Id"或id: "ContactId" ）。 您还应该在服务器响应中包含相应的属性。

我建议你考虑更新jqGrid到最新的免费jqGrid （或至少免费jqGrid 4.8 ）。 您可以在自述文件和维基中阅读有关免费jqGridfunction的更多信息。 免费的jqGrid是我开发的jqGrid的分支。

Answer 2

它终于奏效了。 谢谢@Oleg！ 我在这里看了另一篇文章http://goo.gl/Pg5CMn

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