Question

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

＆＃13;

<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>

＆＃13;

这是我的＆＃39; data.json＆＃39;：

＆＃13;

[ { "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 } ]

＆＃13;

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

Answer 1

一些可能的原因：

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

Answer 2

请参阅以下有效的代码。

如果您没有从服务器加载数据，则需要将数据类型设置为local。

当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>

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

2 个答案: