0
我有一个概念验证的JQGrid,我一直在玩,但我无法让它显示来自返回JSON的web服务的数据。我知道这是正确地打我的服务,因为我可以设置一个断点,并看着它在页面加载时受到打击。无法让JQGrid显示数据(来自JSON服务)
网格呈现,看起来不错,但没有数据显示在其中。我对电网的代码如下所示(我尝试删除所有的复杂性,我可以):
jQuery("#list4").jqGrid({
url: 'http://localhost:55555/GetJson',
datatype: "json",
colNames: ['-First Name-', '-LastName-'],
colModel: [
{ name: 'fname', index: 'fname', width: 50},
{ name: 'lname', index: 'lname', width: 50}
],
caption: "Employees",
pager: "#pager2",
viewrecords: true,
width: 550
});
jQuery("#list4").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false})
我的服务返回以下JSON(请注意,我添加换行符以提高可读性):
{"total":5,"page":1,"records":5,"rows":[
{"id":1,"cell":["Andrew","Smith"]},
{"id":2,"cell":["Danny","Johnson"]},
{"id":3,"cell":["Ron","Lewis"]},
{"id":4,"cell":["George","Washington"]},
{"id":5,"cell":["Peter","Davis"]}]}
就像我说的,网格似乎渲染正常,当我尝试用JS直接填充数组时,它填充得很好,但它不会读取我的JSON。有任何想法吗?
这是我在阅读Oleg的文章并复制他的示例后在本地尝试的HTML:它仍未显示任何数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Just simple local grid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
jQuery("#list4").jqGrid({
url: 'repdetec.json',
datatype: "json",
colNames: ['-First Name-', '-LastName-'],
colModel: [
{ name: 'fname', index: 'fname', width: 50},
{ name: 'lname', index: 'lname', width: 50}
],
caption: "Employees",
pager: "#pager2",
viewrecords: true,
width: 550
});
jQuery("#list4").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false})
});
//]]>
</script>
</head>
<body>
<table id="list4"><tr><td/></tr></table>
<div id="pager2"></div>
</body>
</html
我查看了你的样品,它看起来不错。我在本地拉下了html,并将URL更改为您正在托管JSON的URL,并且当我将它拉到本地时,它仍然显示一个空格!我正在使用的标记如上所示。 – RepDetec 2011-04-09 23:42:29
@RepDetec:你只能从同一个网站**获得每个Ajax的数据**。请参阅[相同来源政策](http://en.wikipedia.org/wiki/Same_origin_policy)。您应该在本地** ** HTML和AJAX文件。它在那里放置在相同的目录中,或者在它将工作的URL中使用**相对路径**。 – Oleg 2011-04-10 06:02:29
好的,所以我下载了json,并将其保存为repdetec.json与html文件完全相同的目录。当我在本地打开HTML时,它仍然没有显示数据。我已经更新了上面的HTML,以反映我的具体情况。它仍然显示一个空的网格。 – RepDetec 2011-04-10 19:22:05