jqGrid不呈现数据-标头可见 [英] jqGrid not rendering data - Headers visible
问题描述
在玩jqGrid时，我遇到了以下问题. jqGrid中的数据未呈现.即使我能够看到包含所有列的网格标题，但数据不会出现.我正在以JSON格式从控制器的操作方法返回数据.
While playing around with jqGrid, I ran into the following issue. The data in jqGrid is not getting rendered. Even though I am able to see the header of the grid with all the columns but the data does not appear. I am returning the data from an action method of the controller in a JSON format.
<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数据，如下面的屏幕截图所示.
Network tab output showing the JSON data returned by the call to Action method 'ContactList' as shown in the screen shot below.
jqGrid标头也正在呈现，但Controller的Action方法返回的数据(JSON格式)未呈现到jqGrid中.
The jqGrid header is also being rendered but the data (in JSON format) returned by Controller's Action method is not getting rendered into the jqGrid.
我在哪里犯错了?
即使按照@Oleg在下面的评论中的建议修改了代码，问题仍然存在.没有错误.弹出来自"loadComplete"事件的警报.
Even after modifying the code as advised by @Oleg in his comment below, the problem persists. There was no error. The alert from 'loadComplete' event popped up.
<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");
});
});
推荐答案
终于成功了.谢谢@Oleg！我在这里看到了另一个帖子 http://goo.gl/Pg5CMn
It finally worked. Thank you @Oleg! I saw another post here http://goo.gl/Pg5CMn
此外，我发现自己在犯另一个错误.我忘记将btnContactList括在双引号中.在Internet Explorer中进行调试后，我发现了这一点.其次，正如@Oleg所建议的那样，jsonReader属性是必需的.可能是因为我正在使用的jqGrid版本.
Additionally, I figured that I was making another mistake. I forgot to enclose btnContactList in double quotes. After debugging in Internet explorer, I found that out. Secondly, as @Oleg suggested that the jsonReader attribute is required. Probably because of the version of jqGrid that I am using.
<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不呈现数据-标头可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
