SlickGrid什么是数据视图?

时间:2012-08-26 08:26:16

标签: slickgrid

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

请赐教。

3 个答案:

答案 0 :(得分:27)

简单来说,只需考虑三个层次:

  Grid
  ----
DataView
  ----
  Data

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

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

网格是显示组件。它唯一的责任是呈现在屏幕上显示所需输出所必需的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);

答案 1 :(得分:10)

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

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

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

  • 寻呼。
  • 分拣。
  • 搜索。
  • 以总计分组。
  • 展开/折叠群组。

答案 2 :(得分:1)

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

希望有所帮助!