Question

我在stackoverflow上看了各种问题/答案，但还没有找到解决方案。

当我使用第一个jqgrid代码块（数据是本地的）时，会显示表和数据。

当我使用第二个块（从url加载的数据）时，会显示一个空表。

奇怪的是，本地数据是url文件的实际内容。所以我假设行为是相同的。

为什么我不能使用网址显示数据，当相同的数据（如果复制到代码中）显示？

HTML（调用包含jqgrid代码的mytest.js）：

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
   <link rel="stylesheet" href="ui.jqgrid.css" />
   <script src="jquery-1.8.0.min.js"></script>
   <script src="jquery-ui-1.8.23.custom.min.js"></script>
   <script src="grid.locale-en.js"></script>    
   <script src="jquery.jqGrid.min.js"></script>
   <script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
  <table id="jqgrid"></table>
</body>
</html>

JSON作为本地数据（数据显示，[此处，为简洁起见编辑]）：

var mydata = [
         {"_id": {"$oid": "50a3f962b7718da1a3090fa9"}, 
         "config": {"titlepage": 
                      {"title": "My First Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         },
         {"_id": {"$oid": "50a3f962b7718da1a3090faa"}, 
         "config": {"titlepage": 
                      {"title": "My Second Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         }
         ];
jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        jsonReader: {
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

通过URL的JSON（不显示数据）。文件mydata.json包含相同的数据在上面使用，但在本地文件中而不是在实际的js代码中：

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
    jsonReader: {
        repeatitems : false,
    },
    caption: 'Titlepage Parameters',
    colNames: ['title', 'color','fontsize'],
    colModel: [
        {name: 'config.titlepage.title'},
        {name: 'config.titlepage.color'},
        {name: 'config.titlepage.fontsize'},
    ],
    });
});

Answer 1

首先，我会修复你的第一个版本的工作代码。如果您使用jsonReader，则 <{>} 。而不是它将被使用localReader。此外，如果输入数据具有此值，我建议您始终使用本机jsonReader值。所以我会将代码修改为以下内容：

id

请参阅the first demo。

如果使用$(function () { "use strict"; var mydata = [ { "_id": {"$oid": "50a3f962b7718da1a3090fa9"}, "config": { "titlepage": { "title": "My First Title", "color": true, "fontsize": "42/44" } } }, { "_id": {"$oid": "50a3f962b7718da1a3090faa"}, "config": { "titlepage": { "title": "My Second Title", "color": true, "fontsize": "42/44" } } } ]; $('#jqgrid').jqGrid({ datatype: 'local', data: mydata, caption: 'Titlepage Parameters', gridview: true, height: 'auto', colNames: ['title', 'color', 'fontsize'], colModel: [ {name: 'config.titlepage.title' }, {name: 'config.titlepage.color' }, {name: 'config.titlepage.fontsize' }, ], localReader: { id: "_id.$oid" } }); });，您需要修复datatype: "json"：

jsonReader

请参阅another demo。

Answer 2

Oleg的答案是完整的解决方案。

以下是修改后的代码。也就是说，我最初编写的代码加上成功将数据加载到网格中的一个更改（来自Oleg）。对我来说，关键是在jsonReader中添加root函数：

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
        jsonReader: {
            root: function (obj) { return obj; },
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

如何从url显示jqgrid（本地数据工作，url数据没有）

2 个答案: