用 JSON 数据填充 Dojox.grid.DataGrid答案

【问题标题】：Filling Dojox.grid.DataGrid with JSON Data用 JSON 数据填充 Dojox.grid.DataGrid
【发布时间】：2011-07-03 12:20:55
【问题描述】：

我有这种格式的 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>

【问题讨论】：

我不明白这个问题..请清除它。

标签： dojo

【解决方案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 需要一个至少具有两个属性的对象：标识符和项目。因此，将您的数据更改为：

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>

最后，您的网格本身。表头需要与商店中商品的属性相对应。例如，您有日期、开盘价和最高价，因此请在每个 th 上使用 field 属性：

<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>

我在表格中添加了“高度：500px”，但这对您来说可能不是必需的。

【讨论】：