无法让 JQGrid 显示数据（来自 JSON 服务）

发布于 2024-10-31 03:15:14 字数 3015 浏览 0 评论 0原文

我有一个我一直在使用的概念验证 JQGrid，但我无法让它显示来自返回 JSON 的 Web 服务的数据。我知道它正确地命中了我的服务，因为我可以设置一个断点并在页面加载时观察它被命中。

网格呈现，看起来不错，但其中没有显示任何数据。我的网格代码如下所示（我试图消除所有可能的复杂性）：

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。有什么想法吗？

这是我在阅读 Oleg 的帖子并复制他的示例后在本地尝试的 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

原文

I have a proof-of-concept JQGrid I have been playing with, but I cannot get it to show data from a webservice that returns JSON. I know it is properly hitting my service, because I can set a break-point and watch it get hit while the page is loading.

The Grid renders, and looks good, but no data is ever shown in it. The code I have for the grid is shown here (I tried to remove all of the complexity that I could):

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

My service returns the following JSON (note that I added line breaks for readability):

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

Like I said, the grid seems to render properly, and when I try to populate it with an array directly in JS, it populates just fine, but it will NOT read my JSON. Any ideas?

This is the HTML I tried locally after I read Oleg's post and copied his sample: It is still not showing any data.

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

分享到QQ

分享到微博