【发布时间】：2011-04-17 10:34:37
【问题描述】：
我整天都在努力从服务器读取一个 json 文件并通过 dojo 数据网格查看它。请参阅下面的代码 sn-ps 并尽可能帮助我：
html 文件是 ::
<head>
<link rel="stylesheet" type="text/css" href="../../_static/js/dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
@import "../../_static/js/dojox/grid/resources/Grid.css"; @import "../../_static/js/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%;
margin: 0; }
</style>
</head>
<body class=" claro ">
<div id="gridContainer4" style="width: 100%; height: 100%;">
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.CsvStore");
dojo.addOnLoad(function() {
// our test data store for this example:
var store4 = new dojo.data.ItemFileReadStore({
url: "http://localhost/test1.json"});
// set the layout structure:
var layout4 = [{
field: 'abbr',
name: 'Title of Movie',
width: '200px'
},
{
field: 'name',
name: 'Year',
width: '50px'
},
{
field: 'capital',
name: 'Producer',
width: 'auto'
}];
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
abbr: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
json 是 ::
{ identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'eg', name:'Egypt', capital:'Cairo' },
{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
{ abbr:'er', name:'Eritrea', capital:'Asmara' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn' },
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }
]}
【问题讨论】：
-
那么究竟是什么在这里不起作用？如果我把它扔到 jsfiddle 中，它似乎对我很好（唯一的区别是我将数据直接扔到商店而不是通过单独的 URL）：jsfiddle.net/LRnhu/1 - 如果你在外部特别拉入 JSON 时遇到问题，请确保 URL 正确并且它引用的是同一个域（因为它使用不允许跨域的 XHR）。正如 Oleg 所提到的，使用有效的 JSON 格式是个好主意。