阅读json与dojo显示在网格

问题描述：

我一直在努力从服务器读取json文件并通过dojo datagrid查看它。请参阅下面的代码片段，并帮助我，如果可能的：阅读json与dojo显示在网格

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）：http://jsfiddle.net/LRnhu/1/ - 如果你是特别是在外部引入JSON时遇到问题，请确保URL正确，并且引用的是同一个域（因为它使用跨域不允许的XHR）。也正如Oleg提到的那样，使用有效的JSON格式是个好主意。 – 2010-10-03 00:43:50

答

我不使用道场，但如果test1.json的文件内容是真的如您在帖子末尾写的那样，那么这是错误的。在JSON格式中，所有属性名称和所有字符串必须双重quoited。因此，尝试用以下

{ 
    "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" } 
    ] 
}

一个很好的地方，你可以验证你的JSON数据是http://www.jsonlint.com/更换test1.json文件。

嗨。谢谢回复。 – 2010-09-26 17:47:16

@ user344788。它有帮助吗？你能转发吗？可能你应该使用'dojo.xhrGet（）'来加载数据。查看以下链接http://mail.dojotoolkit.org/pipermail/dojo-interest/2010-January/042254.html，http://doc-staging.dojocampus.org/quickstart/ajax.html和http：// stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet – Oleg 2010-09-26 19:03:58

阅读json与dojo显示在网格

相关推荐