掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX

核心提示： 在浏览器中运行，效果如下：图 3. 第一个 Grid 运行结果DataGrid 开发详解DataGrid 的创建在 DataGrid 的开发中，掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX(6)，有三种方法创建 DataGrid 实例，第一种是 javascript 创建结构

在浏览器中运行，效果如下：

图 3. 第一个 Grid 运行结果

DataGrid 开发详解

DataGrid 的创建

在 DataGrid 的开发中，有三种方法创建 DataGrid 实例，第一种是 javascript 创建结构，html 代码创建实例，我们第一个例子就是使用这种方式实现的；

第二种是由 html 代码创建结构及实例，在这种方法中，我们使用 table 标签，定义 Grid 的结构，而省去了在 javascript 中定义 structure 的部分。具体定义方式与标准的 html 书写方式非常类似，定义方式如 清单 6

清单 6. 由 html 代码创建结构及实例
<table　id="gridNode"　jsid="grid"　dojoType="dojox.grid.DataGrid"　
　store="jsonStore"　rowsPerPage="20"　region="center">　
　<thead>　
　　<tr>　
　　　<th　field="pro_no"　>Product　Number</th>　
　　　<th　field="pro"　>Product</th>　
　　　<th　field="min_amount"　>Minimum　Amount</th>　
　　　<th　field="max_amount"　>Maximum　Amount</th>　
　　　<th　field="avg_amount"　>Average　Amount</th>　
　　</tr>　
　</thead>　
　</table>　

第三种方式就是采用纯 javascript 的方式定义 DataGrid 实例，清单 7声明网页加载完成后就在 id 为 gridNode 的页面结点上创建一个 DataGrid 实例。