关于json：如何从URL显示jqgrid(本地数据有效，URL数据无效)

how to display jqgrid from url (local data works, url data does not)

我已经查看了关于stackoverflow的各种问题/答案，但是还没有找到解决方案。

当我使用jqgrid代码的第一块(数据是本地的)时，将显示表和数据。

当我使用第二个块(从URL加载数据)时，将显示一个空表。

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

为什么我不能使用网址显示数据，
显示相同的数据(如果复制到代码中)何时显示？

HTML(调用包含jqgrid代码的mytest.js)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!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 src="jquery-ui-1.8.23.custom.min.js">
<script src="grid.locale-en.js">
<script src="jquery.jqGrid.min.js">
<script src="mytest.js" type="text/javascript">
</head>
<body>
hey
<table id="jqgrid"></table>
</body>
</html>

JSON作为本地数据(数据显示，[为了简洁起见，在此进行了编辑])：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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'},
],
});
});

相关讨论

首先，我会修复您的第一个工作代码版本。如果使用jsonReader，将不使用jsonReader。取而代之的是它将使用localReader。另外，如果输入数据具有这样的值，我建议您始终使用本机id值。所以我将代码修复为以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(function () {
"use strict";
$('#jqgrid').jqGrid({
datatype: 'json',
url: 'Tim2.json',
caption: 'Titlepage Parameters',
gridview: true,
height:"auto",
//colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'title', jsonmap: 'config.titlepage.title' },
{name: 'color', jsonmap: 'config.titlepage.color' },
{name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
],
jsonReader: {
repeatitems: false,
id:"_id.$oid",
root: function (obj) {
return obj;
}
}
});
});

参见另一个演示。