У меня есть проверочная концепция 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.Есть идеи?
Это 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