我们在 2 月宣布了 网格项目。从那时起，我们完成了前三个阶段，现在正在开始第四阶段。在这篇文章中，我们将回顾一下我们迄今为止构建的内容。

网格

这是我们设计的“零功能网格”。它只增强 HTML 表格，但它做得很好，同时为我们可以添加到其上的各种其他功能提供了合适的钩子。事实证明这非常有用，因为有很多事情是普通 HTML 表格无法做到的。使用 Grid，您将获得

• 使用 CSS 框架进行样式设置，使其成为 ThemeRoller 就绪的
• 一个适当的标题栏，基于表格的标题
• 表格正文滚动所需的标记和样式，同时保持标题固定

Grid 的 API 控制渲染的内容以及呈现的方式

• columns 选项指定要渲染的列。如果未指定，它将获取现有的表格标题元素。
• rowTemplate 选项允许网格从自定义模板渲染每一行。如果未提供此选项，则根据 columns 选项生成每一行。
• source 选项指定要渲染的内容，以纯对象数组的形式。如果未指定，则使用现有的表格行。
• 默认情况下，网格的正文会随着行数的增加而增长。使用 heightStyle: ‘fill’，它保持固定高度，如果存在更多行，则正文将开始滚动。
• 从现有的表格标题中获取列信息时，会读取某些数据属性。网格本身只使用 data-property 属性（以及每个标题单元格的实际文本），但 dataFields 选项指定了其他组件可以使用的一些其他属性，例如“type”、“culture”和“format”，以配置本地排序和过滤。如果网格附加组件处理其他数据属性，则将这些属性添加到 dataFields 选项中，将使它们作为 columns 选项的一部分自动可用。

到目前为止，我们只有 一个增强的表格，但通常情况下，网格需要从某个远程资源中获取数据。这就是 Dataview 的作用。

Dataview

Dataview 是用于检索内容的低级抽象。它有一个 API 用于指定要检索的内容，还有一个 SPI（服务提供者接口），由提供该内容的组件实现。它内置了过滤、排序和分页选项，其设计使添加更多选项（例如分组）变得容易。API 默认情况下是异步的，即使对于本地数据也是如此，因此所有依赖 Dataview 的组件都可以使用本地数据和远程数据。

Dataview 仅依赖于 Widget 和 Observable（我们将在下面讨论），但不依赖于 Grid。这允许 Dataview 在各种环境中使用。例如，它可以为产品列表提供支持，例如 eBay 或亚马逊上的产品列表，在这种情况下表格表示形式不是合适的格式。

Dataview SPI 使从头开始编写实现以及创建可重复使用的扩展变得容易。

例如，我们可以使用 自定义 dataview 作为 Autocomplete 小部件的输入。相同的数据也显示在输入字段下方的网格中。这演示了如何在一个 dataview 中使用多种表示形式，其中每种表示形式都自行决定要显示哪些数据。

至于可重复使用的扩展，我们目前已经实现了三个

1. localDataview 获取一个输入数组，并对该数组进行排序、分页和过滤。它使用 Globalize（见下文）来实现本地化数字和日期的过滤和排序。当与表格上的网格结合使用时，具有现有内容（不指定 source 选项），您将获得一个 完整的 tablesorter.
2. odataDataview 获取一个资源 URL，指向一个理解 OData，即开放数据协议 的 Web 服务。虽然我们的实现尚未涵盖所有 OData 选项，但您可以使用它进行排序、过滤和分页，而无需实现任何自定义请求/响应映射。我们有一个使用 基于 OData 的 Netflix API 的网格 的示例。
3. preloaderDataview 包装一个 Dataview 并调整分页行为，以加载比渲染更多的数据，在本地分页之前预加载另一批数据。在这个 Flickr API 幻灯片示例 中，我们预加载了 API 响应和实际图像。这将所有加载推送到后台，允许用户在没有中断的情况下翻阅图像。

所有三个都需要在实际项目中进行测试，然后我们才能将其视为稳定。我们也在寻找 Dataview 的其他用例，我们可能遗漏了这些用例。

Observable

数据绑定目前是较新 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。下一步是找到数组绑定的抽象，这将消除网格以及 待办事项应用程序演示 的一些开销。

将 Observable 与 Grid 结合使用时，我们可以轻松地添加编辑功能。在我们的 网格编辑演示 中，您可以添加、编辑和删除表格中的开发人员。结果通过 localStorage 持久保存。

与其添加具有“编辑”和“删除”按钮的自定义列，不如使用 可选择交互来选择一行或多行，然后与选择进行交互。在该演示中，selected 数组也是一个可观察数组，第二个网格显示了该数组。请注意，您可以选择一个页面上的行，转到下一页（您可能需要添加一些开发人员才能显示第二页），使用 command/ctrl-单击选择更多行（以扩展选择），它将在第二个网格中显示所有这些行。选择状态与视觉表示分离，使跨多个页面的选择变得非常容易。

Globalize

Globalize 最初是作为 jquery-global 插件开始的。我们将其作为网格项目的一部分重写，使其独立于 jQuery，允许在客户端和 服务器 上使用。我们的 localDataview 实现（如上所述）使用它，它也位于自定义输入（如 Spinner 和 Timepicker）的后面。

Mask、Timepicker、Selectmenu

这三个自定义输入正在作为网格项目的一部分开发。它们旨在用于网格内的内联编辑，以及在普通表单或网站中独立使用。我们即将将所有三个都加入 master，以便将其作为 1.9 的一部分发布。

还有更多…

我们仍在研究 Template、Datepicker 和其他 自定义输入。我们将在拥有更稳定的解决方案后，向大家汇报这些情况。

下一步

我们正在完成现有组件，并开始第 4 阶段。有关详细信息，请 查看主 Grid wiki 页面。

那么，什么时候完成呢？

我们的 路线图 将网格列在 2.1 版本中，而 jQuery UI 的主要重点是 1.9。换句话说，在将网格纳入稳定版本并与所有其他组件一起支持它之前，还有很多工作要做。同时，我们鼓励您立即开始测试上面概述的功能。Grid、Observable 和 Dataview 都非常稳定并且运行良好。Globalize 是一个单独的项目，如果您想在客户端支持本地化数字和日期处理，则应立即开始使用它。

我们重视您的意见和帮助。请使用 开发 jQuery UI 论坛、在各个 wiki 页面上发表评论，或访问我们在 IRC 上的频道（#jqueryui-dev 在 Freenode 上）。如果您找到了某个问题的解决方案，请 发送一个拉取请求。