jQuery jqGrid 不显示 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5018177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid not displaying JSON data
提问by Tim
I'm hoping to use jqGrid for a current web project that I'm working on. The problem is, I can't seem to get the JSON data to be displayed by the grid. Here is the grid's initialization code:
我希望将 jqGrid 用于我正在处理的当前 Web 项目。问题是，我似乎无法让网格显示 JSON 数据。这是网格的初始化代码：
$.fn.loadjqgrid = function(httpposturl){
$(this).jqGrid({
url: httpposturl,
datatype: "json",
mtype: "GET",
colNames: ["Video Title", "Description", "Date Taken", "Date Uploaded"],
colModel: [
{name:"videoTitle", index:"videoTitle", width:150},
{name:"videoDescription", index:"videoDescription", width:200},
{name:"dateTaken", index:"dateTaken", width:150, sortable:true},
{name:"dateUploaded", index:"dateUploaded", width:150, sortable:true}
],
pager: "#gridpager",
rowNum: 10,
viewrecords: true,
caption: "Video Grid"
});
};
The JSON that's returned by the Java servlet:
Java servlet 返回的 JSON：
[{"dateTaken":"Wed Feb 16 00:00:00 UTC 2011","videoDescription":"This is a test","videoTitle":"Test Video","dateUploaded":""}]
Is there something wrong with how the JSON has been formatted or the way the grid has been initialized? Thanks for the help!
JSON 的格式或网格的初始化方式有问题吗？谢谢您的帮助！
回答by Oleg
To have advantages of server side data filtering, paging and sorting jqGrid work better with the data which included additional information about the current page (see here). If you can not change the server side which produce the JSON data you can add loadonce:trueparameter and then the filtering, paging and sorting of data will be done locally. But first of all jqGrid should be able to read your data.
为了获得服务器端数据过滤的优势，分页和排序 jqGrid 可以更好地处理包含有关当前页面的附加信息的数据（请参阅此处）。如果您无法更改生成 JSON 数据的服务器端，您可以添加loadonce:true参数，然后数据的过滤、分页和排序将在本地完成。但首先 jqGrid 应该能够读取您的数据。
You can use jsonReaderwhich I suggested here(the way is also documented here):
您可以使用jsonReader我在此处建议的方法（此处也记录了该方法）：
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
The way using functions inside of jsonReaderis very flexible and you can read practically any JSON data by jqGrid.
内部函数的使用方式jsonReader非常灵活，您几乎可以通过 jqGrid 读取任何 JSON 数据。
After the modification your grid will display the data: see here.
修改后，您的网格将显示数据：请参阅此处。
One small problem stay. jqGrid need have unique idfor every grid row. The id will be assigned to every <tr>element. Currently integer ids "1", "2", ... will be used as ids because no ids are found in your JSON data. If one column of grid could be interpret as the id you can include in jsonReaderthe corresponding property, for example id:"videoTitle". If your data really have no id and you plan have more as one grid of the page you can receive id conflicts. In the case usage idas a function with different implementation for both grids could fix the problem.
留个小问题。jqGrid 需要每个网格行都有唯一的 id。id 将分配给每个<tr>元素。当前整数 ids "1", "2", ... 将用作 ids，因为在您的 JSON 数据中找不到任何 ids。如果网格的一列可以解释为 id，您可以将其包含在jsonReader相应的属性中，例如id:"videoTitle". 如果您的数据确实没有 id 并且您计划将更多数据作为页面的一个网格，您可能会收到 id 冲突。在这种情况下id，将两个网格用作具有不同实现的函数可以解决问题。
回答by Hyman Dorsey
回答by huntar
Bottom line, the JSON data structure you are returning is incorrect.
最重要的是，您返回的 JSON 数据结构不正确。
One advantage of jqGrid is using a server-side library that automatically interacts with the client-side jqGrid. If for some reason you find using those pre-built server-side libraries untenable then you need to generate the JSON in the structure that jqGrid expects.
jqGrid 的一个优点是使用服务器端库，该库自动与客户端 jqGrid 交互。如果由于某种原因您发现使用那些预先构建的服务器端库站不住脚，那么您需要在 jqGrid 期望的结构中生成 JSON。
From the jqGrid JSON Data example (http://www.trirand.com/blog/jqgrid/jqgrid.html) your JSON should look like this:
从 jqGrid JSON 数据示例 (http://www.trirand.com/blog/jqgrid/jqgrid.html) 中，您的 JSON 应如下所示：
{"page":"1",
"total":2,
"records":"13",
"rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
{"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
{"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
{"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
{"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
{"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
{"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
{"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
{"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],
"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}
So for your Data Set:
所以对于你的数据集：
{"page":"1",
"total:2,
"records":"1",
"rows":[{"id":"43", "cell":["Test Video","This is a test","Wed Feb 16 00:00:00 UTC 2011",""]}]}
回答by Mike Gledhill
Actually, it's quite straightforward to get JSON data into a jqGrid, and leave jqGrid to handle paging and sorting, without ever needing to re-call your JSON service.
实际上，将 JSON 数据放入 jqGrid 并让 jqGrid 处理分页和排序非常简单，而无需重新调用您的 JSON 服务。
The key to it is this line:
它的关键是这一行：
loadonce: true,
Now, there's no need for your JSON service to bother with rows, page, totalor recordvalues being sent around. You just load your JSON data once, and leave jqGrid to do the rest.
现在，您的 JSON 服务无需为发送的rows、page、total或record值而烦恼。您只需加载一次 JSON 数据，然后让 jqGrid 完成剩下的工作。
So, for example, here's one of my JSON web services:
因此，例如，这是我的 JSON Web 服务之一：
http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS
http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS
And this is the jqGrid I want to create out of it:
这是我想用它创建的 jqGrid：
Here's my entire jqGrid script:
这是我的整个 jqGrid 脚本：
$("#tblOrders").jqGrid({
url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
contentType: "application/json",
datatype: "json",
jsonReader: {
root: "GetOrdersForCustomerResult",
id: "OrderID",
repeatitems: false
},
mtype: "GET",
colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
colModel: [
{ name: "OrderID", width: 80, align: "center" },
{ name: "OrderDate", width: 90, align: "center" },
{ name: "ShipName", width: 250 },
{ name: "ShipAddress", width: 250 },
{ name: "ShipCity", width: 95 },
{ name: "ShippedDate", width: 95 },
],
pager: "#pager",
height: 'auto',
rowNum: 8,
rowList: [8, 16, 24],
loadonce: true,
sortname: "OrderID",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Northwind orders"
});
And that's it.
就是这样。
Further details on my blog:
更多详情请见我的博客：
回答by Vivek Kumar
If you send data in JSON format then there is no need to use jsonReader
如果您以 JSON 格式发送数据，则无需使用 jsonReader
For example : My model(jqGridModel.cs) looks something like this -
例如：我的模型（jqGridModel.cs）看起来像这样 -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace jqGrid.Models
{
public class jqGridModel
{
public string CompanyName { get; set; }
public string RooftopName { get; set; }
public string UpdatedBy { get; set; }
public string UpdatedDate { get; set; }
}
}
Now, all you need to do is send the data in Json format through controller
现在，您需要做的就是通过控制器以 Json 格式发送数据
-----------jqGridController.cs----------------
-----------jqGridController.cs----------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using jqGrid.Models;
namespace jqGrid.Controllers
{
public class jqGridController : Controller
{
//
// GET: /jqGrid/
public ActionResult jqGridView ()
{
return View();
}
public JsonResult jqGridViewjson()
{
List<jqGridModel> company = new List<jqGridModel>();
company.Add(new jqGridModel(){
CompanyName="Ms",
RooftopName ="MS",
UpdatedBy ="Vivek",
UpdatedDate=DateTime.Today.ToString("dd/MM/yyyy")
});
Console.Write(company);
company.Add(new jqGridModel()
{
CompanyName = "Ms1",
RooftopName = "Ms1",
UpdatedBy = "Pankaj",
UpdatedDate = DateTime.Today.ToString("dd/MM/yyyy")
});
var result = Json(company, JsonRequestBehavior.AllowGet);
return result;
}
}
}
Finally the script file
最后是脚本文件
----------------jqGridScript.js---------------
----------------jqGridScript.js--------------
$(document).ready(function () {
jQuery("#grid").jqGrid({
url: '/jqGrid/jqGridViewjson',
contentType: "application/json",
datatype: "json",
colNames: ['Company Name', 'Rooftop Name', 'Updated By', 'UpdatedDate'],
colModel: [
{ name: 'CompanyName', index: 'CompanyName', width: 150 },
{ name: 'RooftopName', index: 'RooftopName', width: 150 },
{ name: 'UpdatedBy', index: 'UpdatedBy', width: 150 },
{ name: 'UpdatedDate', index: 'UpdatedDate', width: 150}
],
rowNum: 10,
mtype: "GET",
rowList: [10, 20, 30],
pager: '#pager',
loadonce: true,
viewrecords: true,
sortorder: "desc",
autoencode: true,
caption: "Company approval"
});
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
---------------jqGridView.cshtml----------------
---------------jqGridView.cshtml----------------
<!DOCTYPE html>
<html>
<head>
<title>jqGrid</title>
<link href="~/StyleSheet/bootstrap.css" rel="stylesheet" />
<link href="~/StyleSheet/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/StyleSheet/jquery-ui.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid-bootstarp.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid.css" rel="stylesheet" />
</head>
<body>
<div>
<table id="grid"></table>
<div id="pager"></div>
</div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.src.js"></script>
<script src="~/Scripts/jqGridScript.js"></script>
</body>
</html>
回答by Zitun
Maybe it's just a matter of quote or double-quote. It's quite sensitive. In there example :
也许这只是引用或双引号的问题。它相当敏感。在那里的例子：
jQuery("#list5").jqGrid({ url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, ......
