简单的 JSON 数据未显示在 jqGrid 中答案

【问题标题】：Simple JSON Data not being displayed in jqGrid简单的 JSON 数据未显示在 jqGrid 中
【发布时间】：2015-04-06 17:42:14
【问题描述】：

我是 Jquery 和 Json 的新手。我有用 WCF 编写的 RESTful Web 服务，它返回 JSON 对象。我尝试将它绑定到 jqGrid，但没有遇到任何运气。为了测试问题是否出在 WCF 上，我将 JSON 对象保存为静态文件并尝试将其绑定到网格，只是为了意识到这不是 RESTful 服务的问题。最后决定寻求专家的帮助。以下是我的网页代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!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" xml:lang="en" lang="en">

<head>
  <title>My First Grid</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
  <meta charset="utf-8" />
</head>

<body>
  <table id="list"></table>
  <div id="pager"></div>

  <script type="text/javascript">
    $(function() {
      $("#list").jqGrid({
        url: 'data.json',
        //url: 'http://localhost/api/ClientData',
        datatype: "json",
        mtype: "GET",
        colNames: ["Id#", "Client Name", "Is Active"],
        colModel: [{
          name: "Id",
          sortable: true
        }, {
          name: "Name",
          sortable: true
        }, {
          name: "Active",
          align: "right",
          sortable: false
        }],
        pager: "#pager",
        rowNum: 5,
        rownumbers: true,
        rowList: [5, 10, 15],
        height: 'auto',
        width: '500',
        loadonce: true,
        caption: "Client Data"
      }).jqGrid('navGrid', '#pager', {
        edit: true,
        add: true,
        del: true,
        search: true
      });
    });
  </script>


</body>

</html>

这是我的“data.json”：

[ { "Id": "1", "Name": "Client 1", "Active":true }, { "Id": "3", "Name": "Client 3", "Active":true }, { "Id": "2", "Name": "Client 2", "Active":false }, { "Id": "5", "Name": "Client 5", "Active":false }, { "Id": "4", "Name": "Client 4", "Active":true
}, { "Id": "6", "Name": "Client 6", "Active":true }, { "Id": "8", "Name": "Client 8", "Active":true }, { "Id": "7", "Name": "Client 7", "Active":false }, { "Id": "9", "Name": "Client 9, "Active":true } ]

当 URL 映射到 RESTful 服务时，我没有收到任何错误，也看不到数据。当 URL 映射到静态数据“data.json”时，屏幕显示为空白，当我调试代码时，我可以看到错误消息“url 未定义”。浏览器是 IE 11.0。在这里寻求您的建议。

【问题讨论】：

如果您收到url is undefined，您可能将data.json 放在服务器上的错误文件夹中。
data.json 位于保存 html 文件的同一文件夹中。
他们在服务器上吗？您不能使用 AJAX 进行本地文件访问。
文件不在服务器上。当我调试代码时，我可以看到函数正在从库中调用。
为了克服我的疑虑，我在本地保存后引用了这些库。但是，错误是持久的。

标签： javascript jquery json wcf jqgrid

【解决方案1】：

查看下面的代码。

如果您不从服务器加载数据，则需要将数据类型设置为本地。

当 URL 映射到静态数据“data.json”时，屏幕出现为空白，当我调试代码时，我可以看到错误消息'url 未定义”。

对于以上几点，json数据不正确，缺少双引号。

至于从服务器加载 json，我可能需要查看从服务器返回的实际数据

[ { "Id": "1", "Name": "Client 1", "Active":true }, { "Id": "3", "Name": "Client 3", "Active":true }, { "Id": "2", "Name": "Client 2", "Active":false }, { "Id": "5", "Name": "Client 5", "Active":false }, { "Id": "4", "Name": "Client 4", "Active":true
}, { "Id": "6", "Name": "Client 6", "Active":true }, { "Id": "8", "Name": "Client 8", "Active":true }, { "Id": "7", "Name": "Client 7", "Active":false }, { "Id": "9", "Name": "Client 9, "Active":true } ]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!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" xml:lang="en" lang="en">

<head>
  <title>My First Grid</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
  <meta charset="utf-8" />
</head>

<body>
  <table id="list"></table>
  <div id="pager"></div>

  <script type="text/javascript">
    $(function() {

var griddata=    [ { "Id": "1", "Name": "Client 1", "Active":"true" }, { "Id": "3", "Name": "Client 3", "Active":"true" }, { "Id": "2", "Name": "Client 2", "Active":"false" }, { "Id": "5", "Name": "Client 5", "Active":"false" }, { "Id": "4", "Name": "Client 4", "Active":"true"
}, { "Id": "6", "Name": "Client 6", "Active":"true" }, { "Id": "8", "Name": "Client 8", "Active":"true" }, { "Id": "7", "Name": "Client 7", "Active":"false" }, { "Id": "9", "Name": "Client 9", "Active":"true" } ];

      $("#list").jqGrid({
   //     url: 'data.json',
        //url: 'http://localhost/api/ClientData',
data:griddata,
        datatype: "local",
        mtype: "GET",
        colNames: ["Id#", "Client Name", "Is Active"],
        colModel: [{
          name: "Id",
          sortable: true
        }, {
          name: "Name",
          sortable: true
        }, {
          name: "Active",
          align: "right",
          sortable: false
        }],
        pager: "#pager",
        rowNum: 5,
        rownumbers: true,
        rowList: [5, 10, 15],
        height: 'auto',
        width: '500',
        loadonce: true,
        caption: "Client Data"
      }).jqGrid('navGrid', '#pager', {
        edit: true,
        add: true,
        del: true,
        search: true
      });
    });
  </script>


</body>

</html>

【讨论】：

【解决方案2】：

一些可能的原因：

不要进行跨域访问。将您的 html 页面与您的 RESTful url 保持在同一个域中
不要使用本地文件系统。使用网络服务器来提供您的 json 文件。

【讨论】：