JQGrid 中未显示 JSON 数据答案

【问题标题】：JSON data not showing in JQGridJQGrid 中未显示 JSON 数据
【发布时间】：2016-07-11 20:22:34
【问题描述】：

我是 json 的 jqgrid 新手。我已经回顾了各种问题和答案；但是，我仍然无法让数据显示在网格中。下面是我的 PERL 脚本、HTML 页面和结果的屏幕截图。任何帮助将不胜感激。

PERL 结果 {“addressInfo”：{“page”：“1”，“total”：“5”，“records”：“61”，“rows：”[{“Id”：1，“lname”：“Adams”， “fname”：“Mr and Mrs David”，“address”：“3800 Maplewood Dr”，“address2”：“”，“city”：“Lafayette”，“state”：“IN”，“zip”：“47905 ", "got-card": "2015", "status": "Active"}, { "Id": 2, "lname": "Baker", "fname": "Mrs Ellen", "address": " 1857 North Colebrook Rd”、“address2”：“”、“city”：“MANHIEM”、“state”：“PA”、“zip”：“17545”、“got-card”：“2015”、“status” : "Active"}, { "Id": 3, "lname": "Banzhof", "fname": "Mr and Mrs Don", "address": "107 Wellington Rd", "address2": "", " city": "Lancaster","state": "PA", "zip": "17603", "got-card": "2015", "status": "Active"}] }}

HTML 代码

<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
 
<script src="jqgrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 

<script>

//<![CDATA[
   jQuery(document).ready(function () {

  jQuery("#list2").jqGrid({
   	url:'/perl/addrlist2x.pl',
	datatype: "json",
	mtype: 'GET',
    colNames:['Id','Last Name', 'Name','Address','Address 2','City','State','Zip','Got-Card','Status'], //define column names
    colModel:[
      {name:'id', index:'id', width:25},
      {name:'lname', index:'lname', width:100, formatter:'showlink', formatoptions:{baseLinkUrl:'http://localhost/html/addr-update2.html', idName:'Id'}}, 
      {name:'fname', index:'lname', width:200},
      {name:'address', index:'lname', width:250},
      {name:'address2', index:'lname', width:250},
      {name:'city', index:'lname', width:100},
      {name:'state', index:'lname', width:45},
      {name:'zip', index:'lname', width:40},
      {name:'got-card', index:'lname', width:40},
      {name:'status', index:'lname', width:50}
      ],      //define column models
	jsonReader: {
       repeatitems: false,
       id: "Id",
       root: 'addressInfo.rows',
       page: function (obj) { return 1; },
       total: function (obj) { return 1; },
       rows: function (obj) { return obj.addressInfo.rows.length; }  
    },

    width: 900,              //specify width; optional
    rowNum:10,
	loadonce: true,
   	rowList:[15,30,45, 60],
   	pager: '#pager2',
   	sortname: 'lname',
    viewrecords: true,
    sortorder: "asc",
    caption:"Christmas Address List"
  });
});
//]]>
</script>

</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>

</body>
</html>

结果截图enter image description here

【问题讨论】：

标签： jqgrid

【解决方案1】：

JSON 数据错误。您应该将"rows:" [{ 修复为"rows": [{。我建议您验证 http://jsonlint.com/ 中的 JSON 数据。

【讨论】：