Cannot get JQGrid to show data (From JSON service)
I have a proof-of-concept JQGrid I have been playing with, but I cannot get it to show data from a webservice that returns JSON. I know it is properly hitting my service, because I can set a break-point and watch it get hit while the page is loading.
The Grid renders, and looks good, but no data is ever shown in it. The code I have for the grid is shown here (I tried to remove all of the complexity that I could):
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})
My service returns the following JSON (note that I added line breaks for readability):
{"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"]}]}
Like I said, the grid seems to render properly, and when I try to populate it with an array directly in JS, it populates just fine, but it will NOT read my JSON. Any ideas?
This is the HTML I tried locally after I read Oleg's post and copied his sample: It is still not showing any data.
<!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})
});
//]]>
</scr开发者_如何学JAVAipt>
</head>
<body>
<table id="list4"><tr><td/></tr></table>
<div id="pager2"></div>
</body>
</html
How you can see here your code work with the data. I suspect that the data returned from the server either not have exactly the same data which you posted or the server response has the wrong content type. I recommend you examine the server response with Fiddler of Firebug.
If you used Microsoft ASMX web service the old answer can probably help you. If you used ASP.NET MVC with EF look at here.
加载中,请稍侯......
精彩评论