如何从URL显示jqgrid(本地数据有效，URL数据无效) [英] how to display jqgrid from url (local data works, url data does not)
问题描述
我已经查看了关于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 data that 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数据无效)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
