DataGrid基础知识学习.pdfVIP

DataGrid 基础 要创建一个 DojoX DataGrid ，就需要对 DataGrid 的基本工作过程 有一个大致的了解。一个 DataGrid 实例的组成结构如下图所示， DojoX DataGrid 是使用 DataGrid 的基础，因此在使用 Grid 的时 候需要加载相关的 dojox 包；一个小部件通常由框架和样式组成， 因此，我们需要指定 DataGrid 的样式表并且声明 DataGrid 实例。 DataGrid 实例会组合一个 Structure 和一个 Store 。Structure 是 一个表头及数据模型的定义，而 Store 用于承载数据。 图 2 .DataGrid 组成结构 下面开始我们的第一个 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: MaximumAmount }, {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, pr