问题描述
我已经查看了关于stackoverflow的各种问题/答案，但是还没有找到解决方案.
I have looked various question/answers on stackoverflow, but haven't found a solution.
当我使用jqgrid代码的第一块(数据是本地的)时，将显示表和数据.
When I use the first block of jqgrid code (data is local), the table and the data are displayed.
当我使用第二个块(从url加载数据)时，将显示一个空表.
When I use the second block (data loaded from url), an empty table is displayed.
奇怪的是，本地数据是url文件的实际内容.所以我以为行为是相同的.
The strange part is that the local data is the actual content of the url file.So I had assumed that the behavior would be identical.
为什么我不能使用网址显示数据，显示相同的数据(如果复制到代码中)何时显示?
Why can I not display the data using the url,when the same data, if copied into the code, is displayed?
HTML(调用包含jqgrid代码的mytest.js):
The HTML (calls mytest.js which contains the jqgrid code):
<!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作为本地数据(数据显示，[此处，为了简洁起见]):
JSON as local data (data displays, [here, edited for brevity]):
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代码中:
JSON via URL (no data displayed). The file mydata.json contains the same datathat is used above, but in a local file instead of in the actual js code:
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值，则我建议您始终使用本机id值.因此，我将代码修复为以下内容:
First of all I would fix a little your first version of working code. jsonReader will be not used if you use jsonReader. Instead of that it will be used localReader. Additionally I would recommend you always use native id values if the input data have such one. So I would fix the code to the following:
$(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:
In case of usage datatype: "json" you need to fix the jsonReader:
$(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;
}
}
});
});
请参见另一个演示.
这篇关于如何从URL显示jqgrid(本地数据有效，URL数据无效)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！