Question

我整天都在努力从服务器读取一个json文件，并通过dojo datagrid查看它。请参阅下面的代码段并尽可能帮助我：

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' }
        ]}

Answer 1

我不是使用dojo，但如果test1.json的文件内容真的与你在帖子末尾写的一样，那就错了。在JSON格式中，所有属性名称和所有字符串必须是双重的。因此，请尝试使用以下

替换test1.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" } 
    ]
}

您可以验证JSON数据的好地方是http://www.jsonlint.com/。

用dojo阅读json以在网格中显示

1 个答案: