转自:http://smltc.blog.163.com/blog/static/4393688620112124451907/
各种技术之间通常具有密切的联系,您在一个领域的知识能帮助您获得另一个领域的技能。本文从介绍模型-视图-控制器(Model-View- Controller,MVC)设计模式的角度介绍 Dojo Grid 的主要功能。本文可以帮助您理解和轻松掌握 Dojo Grid,即使您以前从没使用过它。
Dojo 是一个可移植的开源 JavaScript 工具包,使用它可以快速构建富客户端 Web 应用程序。它包含的丰富的实用程序可用于构建快速响应的应用程序。而且,它还提供了许多预先封装的开箱即用小部件,您可以通过这些小部件立即开始使用 Dojo。但是,Dojo 没有提供文档来详细演示如何使用每种小部件,比如 Dojo Grid。Dojo Grid 在某种程度上就像一种可以在网页上呈现的微型电子表格。本文将从模型-视图-控制器(MVC)设计模式的角度指导您使用 Dojo Grid 的主要功能,帮助您轻松理解和掌握 Dojo Grid,即使您以前从未使用过它。
MVC 是软件工程领域使用的一种架构模式。模式的成功使用可以将业务逻辑问题与用户界面分离开来,使开发人员能够自由修改一种业务逻辑,而不会影响到其他逻辑。 这种模式的控制器通过用户界面处理输入事件,触发在后台的模型修改。模型操作应用程序数据,视图使用模型来向用户呈现结果。这种模式被广泛应用于许多框架 中,比如 Microsoft? MFC、Java? Swing、Java Enterprise Edition 等。下面各节将分别介绍按 MVC 划分的表格特性。
为了区分原始数据与 UI 的生动外观,Dojo Grid 维护着一个数据模型,用来存储表格将会操作的所有原始数据。例如,日期/时间类型数据通常以毫秒为单位进行存储,而不是存储为 “2009-7-22” 等人类可读的格式,所以可以更加轻松地构造并将它转换为其他类型的日期对象。
与所有 MVC 小部件一样,表格具有自己的数据模型,称为数据存储。在 Dojo 中,几乎所有需要使用数据存储的小部件都能够使用 ItemFileReadStore
和 ItemFileWriteStore
等函数访问通用数据存储,无需使用特定于它们的数据的新 API。
ItemFileReadStore
用于读取特定格式的 JSON 数据。DojoX 项目还提供了XmlStore
、CsvStore
和 OpmlStore
等更多存储方式。这些存储方式用于处理可以相应格式输出数据的服务器。
在 Dojo Grid 和许多其他 MVC 小部件中,所有数据通常都以项或项的属性的形式在数据存储中操作。通过这种方式,可以采用一种标准方式访问数据,许多小部件可同时使用数据。清单 1 给出了本文中使用的示例数据存储结构。
清单 1. 简单数据存储结构示例 { identifier: 'id', label:'name', items: [ {id:0, name: 'Alex', manager: true, sex: 'Male', age:30, date: 1097990400000, annualLeaveTotal: 15, annualLeaveTaken:2}, {id:1, name: 'Jack', manager: false, sex: 'Male', age:26, date: 1184995200000, annualLeaveTotal: 10, annualLeaveTaken:3}, {id:2, name: 'Rose', manager: true, sex: 'Female', age:40, date: 894604800000, annualLeaveTotal: 20, annualLeaveTaken:4}, {id:3, name: 'Wang', manager: true, sex: 'Male', age:44, date: 836630400000, annualLeaveTotal: 20, annualLeaveTaken:5}, ….. } |
在本示例中:
- 每项都有 8 个属性。
id
属性是一个唯一标识符。
数据存储可以采用两种方式构建:声明为标记或以编程方式构造。
使用标记构建数据存储
要使用标记构建数据存储,首先需要用于有序存储所有数据的 JSON 文件(参见清单 2)。本文使用的是 data.json 文件。,然后可以在 HTML 文件中编写清单 2 中的标记。
清单 2. 在 HTML 中声明数据存储 url="data.json"> |
接下来,将存储分配给表格,如清单 3 所示。
清单 3. 分配表格数据存储 rowSelector="10px"> ...
现在,当 Dojo 解析 HTML 代码并构造此表格时,它创建一个 Dojo 存储对象,该对象将从 data.json 文件获取数据,然后将表格存储设置为 “myStore”。图 1 显示了生成的表格的一个示例。 图 1. 构造得到的简单表格使用标记构建表格存储非常简单快捷。但是,如果数据来自一台服务器并且以动态形式组织,那么您需要以编程方式构建表格和它的存储。 以编程方式构建数据存储 要动态地构造和更改表格的存储,同时对服务器端做出响应,您必须:
清单 4 中的代码将一个 JSON 对象构造为数据存储格式。 清单 4. 重新组织数据
接下来,可以创建一个存储并将其设置为表格。 清单 5. 创建并设置表格存储
所有这些步骤所得到的表格与 所示完全一样。 查询数据存储 Dojo Grid 通常在其数据模型中存储整个数据源。但是,随着数据大小的不断增长,这可能影响到性能。实际上,当 Dojo Grid 存储中的项超出了一定数量时,并且如果每项都具有许多属性,排序、搜索和呈现等表格操作的性能就会显著下降。 但是,可以通过一些方式来改善性能。可以编写代码来让服务器向浏览器发送有限的数据,并将这些数据构造到一个表格数据存储中,或者可以使用或 扩展 Dojox 项目提供的
DojoX 项目提供了许多其他数据存储来满足不同的用途。表 1 给出了 Dojo 中目前可用的存储以及它们的目标。 表 1. Dojo 中的可用存储
自定义 Dojo 数据存储 您也可以使用 Dojo.data API 编写自定义数据存储,数据访问应该划分为几个部分,而且数据存储应该使用合适的 API 实现每一部分。
在 MVC 设计模式中,视图从模型检索应用程序数据并将其呈现给用户。表格提供了许多函数来简化对呈现的更改。在以下几节中,我将展示一些典型用法,从视图角度演示 强大的表格功能。. 使用标记进行表格布局定义 总体而言,表格可以在 HTML 标记中以声明方式定义,也可以在 JavaScript 中以编程方式定义。清单 7 给出了一个使用标记的高级结构定义,它会生成如图 2 所示的显示外观。 清单 7. 使用标记定义布局的 JavaScript 代码
以编程方式定义表格布局 表的结构也可以以编程方式设置。
锁定列,禁用横向滚动 可以锁定 一组列,阻止它们横向滚动,而允许其他列继续滚动。要实现此功能,您可以使用两种结构并将一种结构的 在清单 9 所示的示例中,声明了两种结构。针对 ID 和 Name 列的结构的
从图 3 可以看出 ID 和 Name 列已被锁定,但剩余的列仍然可以横向滚动。 图 3. 具有固定列的表格包含多行数据的行 表格支持单个逻辑行包含多行数据。这可以通过将
名为 “Total annual leave days” 和 “Annual leave days already taken” 的列与其他列的数据位于同一行 图 4. 具有多行的表格表格数据格式 可以使用一种表格格式函数来更改数据存储中的数据的呈现方式。这是 MVC 的一种核心概念。它可以定义一种符合用户当地习惯的数据格式,比如日期,甚至可以构造 HTML 组件,比如复选框。清单 11 给出了一个示例。 清单 11. 格式化表格数据的 JavaScript 代码
使用 get interface 您可以使用 我添加了一个名为 “Annual leave days left” 的新列,它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差,如清单 12 所示。 清单 12. 使用 get interface 的 JavaScript 代码
控制器 在 MVC 设计模式中,控制器处理和响应事件(通常为用户操作),并且可以间接调用模型上的变更。Dojo Grid 中的控制器具有非常强大的功能,它提供了许多方法来自定义表格行为,例如如何处理事件、如何排序数据、如何过滤数据等。 在以下各节中,我将展示如何在 Dojo Grid 中使用和自定义控制器。 事件处理 Dojo Grid 具有一种强大的事件处理机制,它根据不同的表格元素和事件类型来提供事件调用接口。例如,它可以在一行或单元格上响应 我以
首先,您需要定义事件处理程序 当用户单击表格的单元格时,应用程序将显示一个警报窗口。图 7 显示了得到的结果。 图 7. 表格的自定义事件处理程序自定义排序 Dojo Grid 提供了根据列的数据类型来排序的基本排序功能。例如,在我的示例中,ID 列按照数字顺序进行排序,名称列按照字母顺序进行排序。 Dojo Grid 中的排序功能也可以自定义。您可以定义自定义排序行为或阻止用户对某些列排序。如果您不希望用户对某些列排序,可以使用 Dojo Grid 的 清单 14 给出了禁用 ID 列的排序功能的 JavaScript 代码。 清单 14. 指定哪些列可以排序的 Javascript 代码
参数索引为表格的列索引,从 1 开始。如果 除了指定哪些列可以排序之外,您还可以指定如何对列进行排序。我在示例中使用 Name 列为例。图 8 显示了 Dojo Grid 的默认排序行为。 图 8. Dojo Grid 的默认排序行为我按降序对名称列进行排序。请注意最后 3 行:顺序为 Victor、Wang 和 vicky。表格的默认排序方式是区分大小写的,并使用 ASCII 码顺序进行排序。所以,小写字母将排在大写字母之后。但是,这种行为不符合软件全球化标准。在这种情况下,您需要自定义排序函数来支持全球化的排序方式。 看一下清单 5 中的 JavaScript 代码,查看如何自定义 Dojo Grid 的排序函数。 清单 15. 自定义 Dojo Grid 的排序函数
数据存储对象中有一个名为 过滤器 Dojo Grid 提供一种非常方便的方式来在客户端过滤数据。您可以定义一列的过滤条件。清单 16 展示了如何过滤表格,仅显示以字母 A 开头的名称。 清单 16. 过滤名称列
单击 filter name 按钮之后,过滤结果将如图 10 所示。 图 10. 经过过滤的表格结束语 本文通过 MVC 设计模式介绍了 Dojo Grid 的主要功能。通常,可以采用多种方式实现一项功能。例如,要在表格中显示日期,既可以使用字符串来在数据存储中表示日期,也可以声明一个 long 并在最终显示中为其设置正确的格式。咋看起来,第一种选择似乎更简单。但是,如果需要使表格全球化,后一种选择更好。希望您在自己的 Dojo Grid 项目中使用 MVC 设计模式。您将会进一步提高代码的健壮性和可重用性。 |