Question

我有以这种格式的JSON数据：

var jsonData = [{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06}];

如何在Dojox.grid.DataGrid

中打印此数据

<body class=" claro ">
        <span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="data.json">
        </span>
        <table dojoType="dojox.grid.DataGrid" store="store1" 
       style="width: 100%; height: 100%;">
            <thead>
                <tr>
                    <th width="150px" >
                        Title of Movie
                    </th>
                    <th width="150px">
                        Year
                    </th>
                    <th width="150px" >
                        Producer
                    </th>
                </tr>

            </thead>
        </table>

    </body>

Answer 1

记住ItemFileReadStore（实际上所有类型的商店）都需要特定格式的数据。你告诉我你有一个jsonData变量：

var jsonData = [{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06}];

这不是ItemFileReadStore想要的格式。 ItemFileReadStore想要一个至少具有两个属性的对象：identifier和items。因此，请将您的数据更改为：

var jsonData = {identifier: "id", 
                items: [
                  {id: 1, date:'August 19, 2004',open:100.01,high:104.06},
                  {id: 2, date:'August 19, 2004',open:100.01,high:104.06},
                  {id: 3, date:'August 19, 2004',open:100.01,high:104.06}
                ]};

如您所见，它现在是具有所需属性的对象。 identifier属性告诉商店使用名为“id”的属性来唯一地区分这些项。您的对象没有唯一属性，因此我在所有项目上添加了id属性。您可能还有其他一些可以使用的属性。

接下来，由于您的数据存在于变量中，为什么要告诉ItemFileReadStore从名为data.json的URL获取数据？相反，做：

<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" data="jsonData"></span>

最后，你的网格本身。表标题需要与商店中项目的属性相对应。例如，您有日期，开放和高级，因此请在每个field上使用th属性：

<table dojoType="dojox.grid.DataGrid" store="store1" 
   style="width: 100%; height: 500px;">
    <thead>
        <tr>
            <th width="150px" field="date">Title of Movie</th>
            <th width="150px" field="open">Year</th>
            <th width="150px" field="high">Producer</th>
        </tr>
    </thead>
</table>

我在表格中添加了“height：500px”，但这可能不是必需的。

使用JSON数据填充Dojox.grid.DataGrid

1 个答案: