开发学院软件开发Java 掌握 Dojo 工具包,第 8 部分: 明日之星 - DojoX 阅读

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

 2009-12-01 00:00:00 来源:WEB开发网   
核心提示: 下面开始我们的第一个 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 }); 

上一页  1 2 3 4 5 6 7 8 9  下一页

Tags:掌握 Dojo 工具包

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接