SlickGrid中的Data View是什么？

Question

我开始使用SlickGrid，对Data View和启用编辑的Grid之间的区别感到困惑。虽然在文档中提到了Data View，但我没有找到有关它的讨论。

请给我讲解一下。

- r2b2

Answer 1

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

  Grid
  ----
DataView
  ----
  Data

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

DataView读取数据数组并通过公开几个标准方法使其可供网格使用。这样，当网格想要获取用于显示目的的数据时，它只需通过其中一个标准方法与dataview交互即可。

网格是显示组件。它的唯一责任是呈现必要的HTML代码以在屏幕上显示所需的输出。

网格从不直接访问数据。它仅与dataview交互。这允许dataview在将数据返回给网格时执行技巧，例如提供用于表示组标题的“虚拟”行。

如果您感兴趣，下面的示例是使用SlickGrid和DataView创建最简单的示例之一。

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);

- njr101

---

我正在考虑是编写自定义DataView实现还是单独编写一个模型，为默认的DataView提供I/O。有人构建或看到过自定义DataView吗？我从未见过，想要进行阅读。 - SimplGy

Answer 2

DataView 是建立在数据源之上的抽象层。如果所有数据都可以在客户端获得（例如在 JavaScript 数组中），DataView 可以提供许多有用的功能，而表格本身没有这些功能是有意为之的。 SlickGrid 试图保持核心简洁，同时鼓励其 API 中的模块化设计和数据抽象。

DataView 的工作方式是将您的数据作为数据提供者传递给 SlickGrid，而不是使用原始的数据数组。例如，如果您使 DataView 对数据进行分组，则使表格认为“group”行只是常规数据项，因此表格无需知道它们。 DataView 告诉表格这些项具有自定义的显示和行为，并提供其实现。然后，您将连接 DataView 的 onRowCountChanged 和 onRowsChanged 事件来更新表格，达成目标。

以下是 DataView 添加到表格的功能的大致列表：

• 分页。
• 排序。
• 搜索。
• 带总计的分组。
• 扩展/折叠组。

- Tin

---

排序也可以直接应用于网格中。例如：http://mleibman.github.io/SlickGrid/examples/example-multi-column-sort.html - Jacob van Lingen

Answer 3

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

希望这有所帮助！

- ganeshk