slickgrid - SlickGrid 什么是数据视图？

Question

我开始使用 SlickGrid，我对数据视图和网格（启用编辑）之间的区别感到困惑。我没有在文档中找到关于数据视图的一些讨论，尽管那里已经提到过。

请赐教。

Answer 1

简单来说，只需要考虑三层：

  Grid
  ----
DataView
  ----
  Data

在底部，您有原始数据。这只是一个普通的旧数组。数组中的每个项目代表一行数据（在网格中显示为一行）。

DataView 读取数据数组并通过公开几个标准方法使其可用于网格。这样，当网格想要获取用于显示的数据时，它只是通过一种标准方法与数据视图对话。

Grid 是显示组件。它的唯一职责是呈现在屏幕上显示所需输出所需的 HTML 代码。

网格从不直接访问数据。它只与数据视图对话。这允许数据视图在将数据返回到网格时执行技巧，例如提供用于表示组标题的“幻像”行。

如果您有兴趣，下面的示例只是您可以想出的最简单的示例，它使用带有 SlickGrid 的数据视图。

var data = [
  { title: "Primer",       rating: "A" },
  { title: "Matrix",       rating: "B" },
  { title: "Transformers", rating: "C" },
];
var columns = [
  { id: "title",  name: "Title",  field: "title" },
  { id: "rating", name: "Rating", field: "rating" }
];
var options = {
  enableColumnReorder: false  // ... whatever grid options you need
};

var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

// Feed the data into the dataview
dataView.setItems(data);

Answer 2

DataView 是数据源之上的抽象。如果客户端上的所有数据都可用（即在 Javascript 数组中），DataView 可以提供许多网格本身没有的有用功能。（网格缺乏这些特性的事实是设计使然 - SlickGrid 试图保持核心精简和简单，同时鼓励其 API 中的模块化设计和数据抽象。）

DataView 的工作原理是接收您的数据并充当数据提供者，您可以将其传递给 SlickGrid，而不是原始数据数组。例如，如果您将 DataView 分组数据，它会使网格认为“组”行只是常规数据项，因此网格不需要知道它们。DataView 告诉网格这些项目具有自定义显示和行为，并提供两者的实现。然后连接 DataView 的 onRowCountChanged 和 onRowsChanged 事件以更新网格，瞧。

以下是 DataView 添加到网格的功能的粗略列表：

• 分页。
• 排序。
• 搜索。
• 与总数分组。
• 展开/折叠组。

Answer 3

DataView 允许在不修改数据或网格的情况下对数据进行排序和过滤。您可以将其视为网格顶部的叠加层，提供与视图相关的功能 - 在某些情况下增强了这些功能。

希望有帮助！