【发布时间】：2015-05-08 19:16:17
【问题描述】：
在玩 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>
控制器中的动作方法：
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);
}
Network 选项卡输出显示调用 Action 方法“ContactList”返回的 JSON 数据，如下面的屏幕截图所示。
jqGrid 标头也正在呈现，但控制器的 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");
});
});
【问题讨论】：
-
您使用哪个版本的 jqGrid？ 我建议您添加
loadonce: true选项和loadError回调（请参阅the answer）。您使用的jsonReader包含错误信息。如果您使用不太旧的 jqGrid 版本，则可以将其删除或添加jsonReader: { root: function (obj) { return obj; } }。 -
这是我在文件“jquery.jqGrid.min.js”顶部找到的 - jqGrid 4.4.3 - jQuery Grid
-
遇到这样的问题后，我想知道这个网格控件有多可靠。尽管网格无法将其与数据绑定，但我可以看到 JSON 格式的响应。
-
当我第一次单击按钮时，数据现在已成功加载到网格中。但是，如果我重新单击该按钮，则不会发生任何事情。我希望它会重新加载网格并重新加载数据，但它不会那样工作。想知道为什么它会这样吗？
-
很清楚，因为
$("#ContactTable").jqGrid({...});创建网格。这意味着它将最初的空表转换为相对复杂的潜水和表结构。您可以创建一次网格，然后调用$("#ContactTable").trigger("reloadGrid");以重新加载网格的主体，或者您也可以添加$("#ContactTable").jqGrid("GridUnload");在创建网格之前。如果存在，它将破坏 jqGrid。您的代码中的更多问题是没有使用寻呼机。我建议您至少添加顶级寻呼机toppager: true或添加rowNum: 1000（默认为20）。
标签： jquery json asp.net-mvc jqgrid