简单 JSON 数据未在 jqGrid 中显示

Question

我是 Jquery 和 Json 的新手。我有 RESTful 用 WCF 编写的 Web 服务，其中 returns 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 is undefined'。浏览器是IE 11.0。在此征求您的意见。

Answer 1

一些可能的原因：

不要进行跨域访问。将您的 html 页面与您的 RESTful url
不要使用本地文件系统。使用网络服务器为您的 json 文件提供服务。

Answer 2

查看下面有效的代码。

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

When the URL is mapped to static data 'data.json' the screen appears to be blank and when I debug the code I can see the error message 'url is undefined'.

对于以上几点，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>

简单 JSON 数据未在 jqGrid 中显示

Simple JSON Data not being displayed in jqGrid

javascript

jquery

json

wcf

jqgrid