我们在 2 月份 宣布了网格项目。从那时起，我们完成了前三个阶段，现在正在开始第四个阶段。在本文中，我们将看看我们到目前为止所构建的内容。
这就是我们设计为“零功能网格”的内容。它只增强 HTML 表格，但它做得很好，同时还为我们可以在其之上添加的各种其他功能提供了正确的挂钩。事实证明，这非常有用，因为有很多事情是普通的 HTML 表格做不到的。使用网格，您将获得
- 使用 CSS 框架进行样式设置，使其支持 ThemeRoller
- 基于表格标题的适当标题栏
- 用于滚动表格主体的标记和样式，同时保持标题固定
网格的 API 控制要渲染的内容以及如何呈现内容
- **columns** 选项指定要渲染的列。如果未指定，它将选取现有的表格标题元素。
- **rowTemplate** 选项允许网格从自定义模板渲染每一行。如果未提供此选项，则将根据 columns 选项生成每一行。
- **source** 选项指定要渲染的内容，以普通对象数组的形式。如果未指定，则使用现有的表格行。
- 默认情况下，网格的主体随着行数的增加而增长。使用 **heightStyle**: ‘fill’ 时，它将保持固定高度，如果还有更多行，则主体将开始滚动。
- 当从现有的表格标题中获取列信息时，会读取某些 data-属性。网格本身只使用 data-property 属性（以及每个标题单元格的实际文本），但 **dataFields** 选项指定了其他组件可以使用的一些其他属性，例如“type”，“culture” 和“format”，以配置本地排序和筛选。如果网格附加组件处理其他 data 属性，则将它们添加到 dataFields 选项中将使它们作为 columns 选项的一部分自动可用。
到目前为止，我们只有 一个增强的表格，但很多时候，网格需要从某个远程资源中获取数据。这就是 Dataview 派上用场的地方。
Dataview 是用于检索内容的低级抽象。它有一个用于指定要检索的内容的 API 和一个 SPI（服务提供者接口），由提供该内容的组件实现。内置选项用于筛选、排序和分页，并且设计使添加更多选项（如分组）变得容易。API 默认情况下是异步的，即使对于本地数据也是如此，因此所有依赖 Dataview 的组件都可以与本地数据和远程数据一起使用。
Dataview 仅依赖于 Widget 和 Observable（我们将在下面介绍），但不依赖于 Grid。这允许 Dataview 在各种情况下使用。例如，它可以为产品列表提供支持，例如 eBay 或 Amazon 上的产品列表，其中表格表示形式不是正确的格式。
Dataview SPI 使从头开始编写实现以及创建可重用扩展变得容易。
例如，我们可以使用 自定义 dataview 作为自动完成小部件的输入。相同的数据也会显示在输入字段下方的网格中。这演示了 Dataview 如何在多个表示形式中使用，其中每个表示形式都自行决定显示什么数据。
至于可重用扩展，我们目前已经实现了三个
- localDataview 获取输入数组并对该数组进行排序、分页和筛选。它使用 Globalize（见下文）来实现本地化数字和日期的筛选和排序。当与表格中的网格结合使用时，表格中包含现有内容（没有指定 source 选项），您将获得 一个完整的表格排序器。
- odataDataview 获取一个资源 URL，指向理解 OData，开放数据协议 的 Web 服务。虽然我们的实现还没有涵盖所有 OData 选项，但您可以使用它来排序、筛选和分页，而无需实现任何自定义请求/响应映射。我们有一个 使用基于 OData 的 Netflix API 的网格示例。
- preloaderDataview 包装一个 Dataview 并调整分页行为，以加载比渲染的更多数据，在预加载另一批之前本地分页。在这个 Flickr API 幻灯片示例 中，我们预加载了 API 响应和实际图像。这将所有加载推送到后台，允许用户在没有中断的情况下浏览图像。
所有这三个都需要在实际项目中进行测试，然后我们才能认为它们是稳定的。我们还在寻找 Dataview 的其他用例，这些用例我们可能错过了。
数据绑定目前是较新 JavaScript 框架中的一个普遍主题，有各种竞争解决方案可用。我们还没有一个功能齐全的替代方案，但我们开发了一个低级抽象，它可能会在未来为数据绑定组件提供支持。我们称这个抽象为 Observable。它提供了一个 API，用于对可以被观察到的普通 JavaScript 对象和数组进行更改，这些对象和数组可以监听每个更改触发的事件。我们设计 Observable 的目的是使其具有非常少的方法和事件，以便于在其他上下文中实现相同的 API。这些事件是
- change：在一个或多个属性更改后，在对象上触发。
- insert：在插入一个或多个新项目后，在数组上触发。
- remove：在删除一个或多个项目后，在数组上触发。
- replaceAll：在替换数组中的所有项目后，在数组上触发。
最后一个事件乍一看可能很奇怪，但这样就可以创建一个 dataview，将其传递给网格，让网格订阅该 dataview 输出数组上的事件，然后在 dataview 更新时更新自身。
对于所有四个事件，Observable 提供了方法对应项
- property：用于处理对象
- insert、remove 和 replaceAll：用于处理数组。
两种情况下的用法都是一致的
- $.observable( object ).property( “name”, “Fred” );
- $.observable( array ).insert({ name: “Peter” });
我们仍在研究 Observable。下一步是找到数组绑定的抽象，这将减少网格以及 todo-app 演示 的一些开销。
当将 Observable 与网格结合使用时，我们可以轻松地添加编辑功能。 在我们的网格编辑演示 中，您可以添加、编辑和删除表格中的开发人员。结果通过 localStorage 保持。
与其添加包含“编辑”和“移除”按钮的自定义列，我们可以使用可选择交互来选择一个或多个行，然后与选择进行交互。在该演示中，selected 数组也是一个可观察数组，第二个网格显示了该数组。请注意，您可以选择一页上的行，然后转到下一页（您可能需要添加一些开发人员才能显示第二页），使用命令/ctrl 键单击（扩展选择）来选择更多行，它将在第二个网格中显示所有这些行。选择状态与视觉表示分离，使得跨多个页面进行选择变得非常容易。
Globalize 最初是作为 jquery-global 插件开始的。我们将其重写为网格项目的一部分，使其独立于 jQuery，允许在客户端和服务器 上使用。我们的 localDataview 实现（如上所述）使用它，它也是自定义输入（如Spinner 和Timepicker）背后的技术。
这三个自定义输入正在作为网格项目的一部分进行开发。它们旨在用于网格内的内联编辑，以及独立于常规表单或网站中使用。我们即将完成所有三个输入的开发，并将它们作为 1.9 版本的一部分发布。
还有更多……
我们仍在开发Template，Datepicker 和其他自定义输入。一旦我们有了更稳定的解决方案，我们将发布相关信息。
下一步
我们正在完成现有的组件，并开始第四阶段。有关详细信息，请查看网格维基主页面。
那么，什么时候完成呢？
我们的路线图 将网格列入 2.1 版本，而 jQuery UI 的主要重点是 1.9 版本。换句话说，在我们能够将网格发布为稳定版本并与所有其他组件一起提供支持之前，还有很多工作要做。同时，我们鼓励您现在开始测试上述功能。网格、可观察和 Dataview 都非常稳定，运行良好。Globalize 是一个独立的项目，如果您希望在客户端支持本地化数字和日期处理，您现在应该开始使用它。
我们重视您的意见和帮助。请使用开发 jQuery UI 论坛，对各个维基页面发表评论，或访问我们的 IRC 频道（Freenode 上的 #jqueryui-dev）。如果您找到了解决问题的方法，请提交拉取请求。
