Dojo 从 v1.0 开始引入了一个功能强大，快速，健壮的控件--Grid。
Grid 在dojo的体系结构中属于Dojox 这个包中。
这个Grid 比较灵活，可以排序，过滤，编辑，多表头，支持多种Cell 控件。
官方文档的地址：http://dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid
通过官方的示例文档，我进行了一次精彩的体验，在这里和大家分享一下我的体验心得。
要完成一个Grid，需要下面几个步骤，每个步骤都是必不可少的。
1. 首先是导入样式表
没有样式表，就无法显示漂亮的列表出来，你看到的将是丑陋的静态文本。
css 代码
- < style type="text/css">
- @import "http://localhost/dojo/dojox/grid/_grid/tundraGrid.css";
- @import "http://localhost/dojo/dijit/themes/tundra/tundra.css";
- @import http://localhost/dojo/dojo/resources/dojo.css
- < / style>
2. 模型（Model）
Model指的是什么意思呢？<o:p></o:p>
大家应该都熟悉MVC模式，MVC模式是"Model-View-Controller"的缩写，中文翻译为"模型-视图-控制器"。MVC应用程序总是由这三个部分组成。<o:p></o:p>
视图(View)代表用户交互界面<o:p></o:p>
Model就是业务流程/状态的处理以及业务规则的制定，在grid 里面也就是其所包含的数据。<o:p></o:p>
<o:p> </o:p>
每个grid 都会包含数据，所以每个grid 开头就是 Model 的定义。<o:p></o:p>
Model 的定义一般包含两个div 标签。
代码
- <div dojoType="dojo.data.ItemFileReadStore"
- jsId="jsonStore" url="gridData.txt">
- div>
- <div dojoType="dojox.grid.data.DojoData" jsId="model"
- rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }">
- div>
第一个Div定义数据。<o:p></o:p>
第二个Div 定义Grid 的数据适配器，将数据装换为Gird 的Model。
3. 视图（View）
View 用来定义每个数据列，一个view是多个数据列的组合。通过定义view，使Grid按照要求来显示数据。下面是一个简单的view定义。
xml 代码
- // a grid view is a group of columns
- var view1 = {
- cells: [[
- {name: 'Namespace', field: "namespace"},
- {name: 'Class', width: "25em", field: "className"}
- ],
- [
- {name: 'Summary', colSpan:"2", field: "summary"}
- ]
- ]
- };
-
4. Structure
Structure 是view的集合，也就是说可以将多个view组合成一个view。
Structure 会被Grid用到，而view不会被Grid直接用到，而是被包装成一个Structure来使用。
下面使一个Structure的例子：
js 代码
5. Grid 控件（Widget）
Widget 就是Grid控件，通过定义Grid控件，我们就能将Grid放置到我们的页面上面了。通过Grid 将上面定义的Structure 和model组装起来，从而按照我们定义的样子（Structure），载入我们需要的数据（model），显示出一个Gird列表。<o:p></o:p>
xml 代码
- <div id="grid" dojoType="dojox.Grid" model="model" structure="layout">div>
以上使开发一个Gird必要的五个步骤，已经介绍完了，下面总结一下他们的关系。
可以看到上面几个部分的依赖关系：
附件中包含了一个完整的例子。
附件中包含了Grid的运行的样子，非常的Cool。
- 描述: dojo grid 的组成
- 大小: 15.2 KB
- 描述: Dojo Grid Sample Screen Dump
- 大小: 42.6 KB
分享到：
- 2007-12-11 15:38
- 浏览 12171
- 评论(9)
- 论坛回复 / 浏览 (7 / 19967)
- 查看更多
相关推荐
这里提供了一个实际的例子——构建一个愿望清单应用，使用`dojo.data`模块来管理数据，并通过`dojox.grid.Grid`组件来展示数据。 3.4 **使用JSONP研究雪茄** 当涉及到跨域数据访问时，JSONP是一个常用的解决方案。...
EDT (Enterprise Generation Language) 和 Dojo 是两个在IT领域中特定于IBM的开发工具和技术。EDT（Enterprise Development Tool）是一种集成开发环境，专为IBM i（原名AS/400）平台设计，用于编写和管理应用程序。...
**DOJO 源代码详解** ...通过深入学习和分析这个压缩包中的源代码和示例，你不仅可以掌握 Dojo 的基本用法，还能理解其设计哲学和内部工作机制，从而在实际项目中更好地利用 Dojo 这个强大的工具。
Dojo DataGrid是一个功能丰富的表格控件，它允许用户以表格形式展示大量数据，同时提供排序、筛选、分页等功能。DataGrid可以与各种数据源（如JsonRest、Store等）配合，动态加载和更新数据。 2. **配置DataGrid**...
【dojo_doc】是一个关于Dojo Toolkit的文档集合，可能包含了Dojo框架的详细说明、API参考、示例代码以及教程等内容。Dojo Toolkit是一个广泛使用的JavaScript库，它提供了丰富的功能来帮助开发人员构建复杂的Web应用...
"grid实例"是Dojo中的DataGrid，这是一个用于展示和操作表格数据的强大组件。它支持排序、分页、过滤等功能，同时可以与各种数据源（如JSON, XML, CSV等）集成。DataGrid还提供了丰富的定制选项，如列样式、行编辑等...
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，尤其在构建复杂的、企业级的富互联网应用程序（Rich Internet Applications, RIA）时表现突出。本压缩包"dojostudy"显然是为了帮助用户学习...
#### 二、Dojo体系架构分析 Dojo的体系架构分为几个层次，从底层到顶层分别是包系统、语言库、环境相关包、应用程序支持库以及Widget系统。 1. **包系统**：最底层的包系统是Dojo的基础，它将API按照功能分类封装成...
通过上述详细的步骤说明与代码示例，我们可以看到覆写 Dojo 中 AccordionContainer 的 `onTitleClick` 方法的具体实现方式。这种自定义行为的实现不仅增强了用户体验，还展示了开发者对 Dojo 框架深入的理解与应用...
这本书深入探讨了Dojo工具集的功能和用法，旨在帮助开发者更好地理解和运用这个强大的JavaScript库。Dojo是一个开源的JavaScript框架，以其丰富的功能、模块化的设计以及对Ajax技术的优秀支持而闻名。 在描述中未...
3. **DOJO DOM操作**：DOJO提供了一系列强大的DOM操作函数，比如`dojo.query`用于选择DOM元素，`dojo.create`用于创建新的元素，`dojo.place`用于插入元素等。 4. **DOJO事件处理**：DOJO提供了一套事件处理机制，...
Dojo和ArcGIS API的结合，使得开发者可以利用Dojo的强大力量来增强ArcGIS应用的功能和用户体验。 "dojo_class"可能是一个关于如何使用Dojo的类结构来构建和管理ArcGIS应用的教程。在JavaScript中，类是面向对象编程...
Dijit 是 DOJO 提供的一套强大的 UI 控件库，包括表单元素、布局容器、对话框、菜单等，具有良好的可定制性和响应式设计。 6. **DOJO 动画和视觉效果** DOJO 支持复杂的 CSS3 和 JavaScript 动画，如淡入淡出、...
在自动化测试领域， Rational Functional Tester (RFT) 是一款强大的功能测试工具，尤其适用于复杂的Web应用程序测试。Dojo 是一个广泛使用的JavaScript库和框架，它提供了丰富的UI组件和工具，常用于构建动态、交互...
本文将基于“DOJO-API中文参考手册附加注解实例”的内容，深度剖析Dojo框架的体系架构、核心功能及常用包介绍，以期为开发者提供全面的指导和实用的参考资料。 #### Dojo体系架构概述 Dojo的体系架构呈现出清晰的...
结合 GWT 和 Dojo 可能是为了在 GWT 应用中利用 Dojo 的某些优势，如强大的 UI 控件或动画效果。 标签 "源码" 表明这个压缩包可能包含了实际的代码文件，使得开发者可以研究、学习或在自己的项目中复用。"工具" ...
【标题】"Domino XPages 免费讲课第二课"主要涵盖了XPages开发中的关键控件及其使用，包括编辑控件、选择控件、文件处理控件，以及如何利用开源库增强XPages应用的功能。这一课程是对于Domino平台上的Web应用开发...
开发者可以通过扩展机制实现自定义图层、控件和工具，满足特定需求，同时API还支持与其他JavaScript库的集成，如jQuery、Dojo等。 9. **性能优化** API 3.14对性能进行了优化，例如延迟加载图层、缓存策略、分块...