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
- 浏览 12143
- 评论(9)
- 论坛回复 / 浏览 (7 / 19924)
- 查看更多
相关推荐
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...
parboiled 是一个纯Java库提供了一种轻量级,易于使用,功能强大和优雅的PEG(解析表达式语法)分析设施。你定义的Java源代码的语法规则,直接,没有必要专门编写和维护,外部语法文件。同时保持蒸提供全面的支持,...