使用 MVC 设计模式的 Dojo Grid -1

look_w

简介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. 简单数据存储结构示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{     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 中声明数据存储

1 2	<span dojoType="dojo.data.ItemFileWriteStore" jsId="myStore"       url="data.json"></span>

接下来，将存储分配给表格，如清单 3 所示。
清单 3. 分配表格数据存储

1 2 3 4 5 6

<table id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" store="myStore" rowSelector="10px">     <thead>          ...     <thead> <table>

现在，当 Dojo 解析 HTML 代码并构造此表格时，它创建一个 Dojo 存储对象，该对象将从 data.json 文件获取数据，然后将表格存储设置为 “myStore”。图 1 显示了生成的表格的一个示例。
图 1. 构造得到的简单表格使用标记构建表格存储非常简单快捷。但是，如果数据来自一台服务器并且以动态形式组织，那么您需要以编程方式构建表格和它的存储。