19

Vaadin 7 中的Grid和Table组件有什么区别？

我应该使用哪个，何时使用？

4

4 回答 4

24

概括

网格→ 新的和惊人的
表→ 可敬的和可靠的

Table是一个非常好的数据网格显示小部件，内置在最早的 Vaadin 版本中。

Grid是从头开始的大重写，旨在取代 Table。Vaadin 团队正在利用他们从经验中获得的智慧，“如果我们当时就知道我们现在所知道的”，以在当今的 Web 技术的情况下实现最好的数据网格。网格是如此重要，以至于它拥有自己的虚荣页面。请参阅此公司博客文章以获得快速概述。

所以，一般来说，我建议你专注于 Grid。尝试一下，先学习一下，看看它是否满足您的需求。如果您遇到错误或问题，或者您需要 Grid 中缺少的功能，则回退到 Table。您可以在一个项目中混合搭配两者，但需要注意的是不同的外观和行为可能会使您的用户感到困惑。

将Grid想象成一个早熟的少年，充满希望并渴望跨入成年期，而Table则是一个成熟的成年人，在中年的黄金岁月里努力工作，同时梦想着一个来之不易的退休生活，驶向日落。

细节

如果在持续项目中使用 Vaadin 6，或者您需要支持非常旧的浏览器，那么Table这是您唯一的选择。Grid需要 Vaadin 7 或更高版本。

以下是 Grid 目前缺少的一些主要表格功能。

  • 拖放功能（稍后添加）。
  • 通过用户拖动列标题的边缘来调整列的大小。

两者都有许多共同特点。他们练习延迟加载到浏览器，仅根据需要从服务器端自动加载数据，以免网络浏览器过载。两者都允许用户拖动列以重新排序。两者都让用户显示/隐藏列。

行选择

两者都允许选择单行或多行。

Grid 还有一个自动功能，它会添加一列复选框。用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来选择多行。许多（如果不是大多数）用户对鼠标驱动的多行选择很笨拙。查看此屏幕截图，并注意第一列。

选择的编程支持不同。Grid 没有扩展AbstractSelect，而是定义了自己的选择 API。调用addSelectionListener()并定义一个SelectionListener. 参见Vaadin 之书。

页眉和页脚

两者都有页眉和页脚，但 Grid 有更多选择。网格可以放置小部件而不是文本。网格可以有多行标题。网格可以连接标题单元格，就像在 HTML 表格中跨越一样。

就地编辑

两者都提供数据的就地编辑，但方式不同。表格允许编辑单元格中的数据。Grid 采用了不同的方法，通过显示一个迷你窗口、一个小的数据输入表单来编辑整行。此表单包括一对确认和取消按钮。这种形式比 Table 的单元格编辑灵活得多。

过滤

Grid 提供用户控制的过滤，其中一行可输入的单元格出现在标题下方。当用户键入时，将应用过滤器以仅显示匹配的行。请参阅此屏幕截图。使用 Table，您需要创建某种用户界面并应用过滤。

由数据容器支持

更新： Vaadin 8 带来了一个新版本的 Grid，它利用了新改进和大大简化的数据模型。这是使用 Grid 而不是 Table 的主要原因。请注意，原始 Grid 和 Table 在 Vaadin 8 中仍然可以通过Vaadin 7 兼容层使用。

以下旧信息完好无损……</p>

Table 和 Grid 都是仅展示的小部件，由一个单独的数据对象支持，该对象Container根据Vaadin 数据模型实现接口。

Table 类也充当Container，这总是让我感到困惑。我很高兴看到 Grid 保持更清晰的分离。

像 Table 一样，Grid 确实提供了一些方便的方法，用于在不正式生成 Container 的情况下将一些数据扔到 Grid 本身的快速和肮脏的情况。但是 Grid 的便捷方法使用行和列项，而不是 Container 的项和属性项。这些术语更清楚地表明您正在与 Grid 交谈，但 GridIndexedContainer代表您对其默认附加实例进行操作。

单元格内容

更新：在 Vaadin 8.1 中，Grid 获得了在单元格中显示组件的能力。查看组件渲染器的现场演示。

单元格内容处理不同。Grid 不能直接显示列图标，也不能在单元格中放置组件（小部件）。而是使用了新Renderer功能。

文档和演示

两者都在The Book Of Vaadin中有一章，一章用于 Table，一章用于 Grid。

两者都有现场演示。一个用于 Table（和TreeTable）。还有一对网格，一个全窗口，一个具有各种方面。

请参阅 Grid 的此手册页面，包括嵌入式现场演示，以及指向更多演示的链接。

其他差异

Grid 有一个内置的小部件，用于将数字显示为一个小温度计小部件。请参阅此屏幕截图，在最后一列中。

有关更具体的差异，请参阅第5.24.1 节概述 - Vaadin中的表格差异。

Esoterica... Grid 是Vaadin Components中的第一个组件，这是一组基于Google Polymer构建的高质量 Web 组件，可以与任何支持Web 组件的框架一起使用。虽然 Vaadin 团队已承诺在未来数年内支持 Table，但不要指望它会受到如此特别的关注。

瓦丁 8

在 Vaadin 8.0 和 8.1 中，Grid 变得更好。主要改进包括：

  • 与 Vaadin 8 中新的更简单、更时尚的数据模型一起使用
    • 传递要显示的实体集合
    • 使用类型安全的 lambda 语法轻松定义列
      grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
    • 现在更容易延迟加载数据Container：
      grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
  • 显示 Vaadin 组件而不仅仅是渲染器的能力
  • 通过 HTML5 定义的拖放支持进行拖放。
  • 速度更快

表格组件仍可通过 Vaadin 8 中的兼容性层使用，以继续使用 Vaadin 7 类。

未来

Vaadin 团队对 Grid 有很好的计划，因此您在 StackOverflow 页面上阅读的大部分内容都会发生变化。该团队将在未来几个月和几年内急切地添加功能、增强功能和错误修复。Grid 在其短暂的历史中已经进行了许多增强，因此在阅读有关限制或缺乏功能的旧文档时要小心 - 可能不再如此。

于 2015-08-01T06:25:52.153 回答
15

Grid 是一个新的更强大的组件，它应该是 Table 的继承者（请参阅The Table is dead, long live the Grid）。所以应该没有必要偏爱表格而不是网格。

这是 Vaadin 关于从表迁移到网格的系列文章中的第一篇： https ://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic

于 2015-05-09T06:49:09.743 回答
1

实际上，可以用它们来实现你想要的一切。但我的经验是，Grid 使用起来更舒服。

该表易于理解且易于用于简单表（您可能猜到了）。因此，如果您只想很好地显示几行数据 - 使用表格。它很稳定，并且在这方面效果很好。

网格看起来像一个表格，但它有一些表格的特征。如果您有大量数据来呈现网格可能会更好地处理它。还有一个很好的做法是“内联编辑”您的数据。有一种方法可以广泛地自定义网格的标题。如果您想在类似表格的组件中进行大量自定义和交互，请使用 Grid。

在此处查看功能：

https://vaadin.com/grid

http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid

在这两个组件中选择行/单元格的方式有所不同。例如，用于选择的 EventListener 在返回值方面略有不同。此外，向它们添加列和行的方式也有所不同，但这只是实现的事情，所以这并不重要。

于 2015-05-20T13:28:55.837 回答
0

在过滤表中，如果我们点击表头，第一行将默认通过一个名为setSelectable(true) 的方法突出显示；但在网格表中没有这种类型的动作，

我想在网格表中应用相同的操作。有没有可能拥有这种性质？有没有可用的方法或代码？

下面是我在网格表中使用的代码：

private void buildPagedGrid(Class<T> clazz) {

     setWidth("100%");      
     setSelectionMode(SelectionMode.SINGLE);
     setImmediate(true);        
     setSizeFull();
     setContainerDataSource(dataSource);
     setFooterVisible(true);
}
于 2016-02-04T12:23:01.337 回答