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

核心提示： 下面开始我们的第一个 DataGrid 应用为了在 Web 页面上创建一个 DataGrid 小部件，我们从最基本的二维表格开始，掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX(4)，首先我们需要加载一些样式，来保证 DataGrid 能够正常显示，其中 field 指定了使用

下面开始我们的第一个 DataGrid 应用为了在 Web 页面上创建一个 DataGrid 小部件，我们从最基本的二维表格开始。首先我们需要加载一些样式，来保证 DataGrid 能够正常显示，清单 1。

清单 1. 加载样式
　<style　type="text/css">　
　@import　"dojox/grid/resources/tundraGrid.css";　
　@import　"dojo/resources/dojo.css";　
　</style>　

此处的 css 文件路径为相对于测试页面的相对路径。

在开始创建 Grid 之前，我们还要引入 Dojo 的基础包 dojo.js，以用来加载其他需要的 dojo 类，并加载 dojo.data.ItemFileReadStore 类以及 dojox.grid.DataGrid 类。接下来我们就可以着手开发第一个 DataGrid 了。首先是布局的定义，如 清单 2

清单 2. 定义布局
　var　layout　=　[　
　　{field:　'pro_no',　name:　'Product　Number'　},　
　　{field:　'pro',　name:　'Product'　},　
　　{field:　'min_amount',　name:　'Minimum　Amount'　},　
　　{field:　'max_amount',　name:　'Maximum　Amount'　},　
　　{field:　'avg_amount',　name:　'Average　Amount'　}　
　];　

这里定义了一个数组 layout，其中每一个成员表示一个列的定义，其中 field 指定了使用的数据项，该取值需要遵循 javascript 变量定义规则；name 为该列显示的名称。接下来是 store 的开发，代码如 清单 3

清单 3. 开发 store
　var　sampleData　=　{　
　identifier:　'pro_no',　
　label:　'pro_no',　
　items:　[　
　{pro_no:'2100',　pro:'A　Series',　min_amount:346,　max_amount:931,　avg_amount:647},　
　{pro_no:'2200',　pro:'B　Series',　min_amount:301,　max_amount:894,　avg_amount:608},　
　{pro_no:'2300',　pro:'C　Series',　min_amount:456,　max_amount:791,　avg_amount:532},　
　{pro_no:'2400',　pro:'D　Series',　min_amount:859,　max_amount:2433,　avg_amount:1840},　
　{pro_no:'2500',　pro:'E　Series',　min_amount:459,　max_amount:1433,　avg_amount:1040}　
　]　
　};　
　var　jsonStore　=　new　dojo.data.ItemFileReadStore({　data:　sampleData　});