Vaadin 网格与表格

Question

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

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

Answer 1

总结

网格 → 新的和惊人的
表格 → 古老而可靠的

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

Grid 是从头开始重写的，旨在取代 Table。 Vaadin 团队正在利用他们从经验中获得的智慧，“如果我们当时就知道我们现在所知道的”，以在当今 Web 技术的情况下实现最好的数据网格。网格是如此重要，以至于它得到了own vanity page。请参阅this company blog post 了解快速概览。

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

把Grid想象成充满希望并渴望跨入成年的早熟少年，把Table想象成在中年的黄金岁月里努力工作的成熟成年人- 梦想着未来的退休生活，驶向日落。

详情

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

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

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

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

行选择

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

Grid 还具有自动添加一列复选框的功能。用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来选择多行。许多（如果不是大多数）用户对鼠标驱动的多行选择很笨拙。请参阅this screenshot，并注意第一列。

选择的编程支持不同。 Grid 没有扩展AbstractSelect，而是定义了自己的选择 API。调用addSelectionListener() 并定义SelectionListener。见The Book Of Vaadin。

页眉和页脚

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

就地编辑

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

过滤

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

由数据容器支持

更新： Vaadin 8 带来了利用 a newly improved and greatly simplified data model 的新版本 Grid。这是使用 Grid 而不是 Table 的主要原因。请注意，原始 Grid 和 Table 在 Vaadin 8 中仍然可以通过 Vaadin 7 compatibility layer 使用。

以下旧信息保持不变……

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

Table 类还充当了一个 容器，这总是让我感到困惑。我很高兴看到 Grid 保持更清晰的分离。

像 Table 一样，Grid 确实提供了一些方便的方法，用于在不正式生成 Container 的情况下将一些数据扔到 Grid 本身的快速和肮脏的情况。但是 Grid 的便捷方法使用 row 和 column 术语，而不是 Container 的 item 和 property 术语。这些条款更清楚地表明您正在与 Grid 交谈，但 Grid 代表您执行其默认附加的 IndexedContainer 实例。

单元格内容

更新：在 Vaadin 8.1 中，Grid 获得了在单元格中显示组件的能力。见live demo of the Component Renderer。

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

文档和演示

在The Book Of Vaadin、one for Table 和one for Grid 都有一个章节。

两者都有现场演示。 One for Table（和TreeTable）。还有一对 Grid，one full-window 和 one with various aspects。

查看此brochure page for Grid，包括嵌入式现场演示，以及指向更多演示的链接。

其他差异

Grid 有一个内置的小部件，用于将数字显示为小温度计小部件。请参阅最后一列中的this screenshot。

有关更具体的区别，请参阅The Book Of Vaadin 中的5.24.1 Overview – Differences To Table 部分。

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

Vaadin 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 定义的拖放支持进行拖放。
• 速度更快

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

未来

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

Answer 2

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

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

Answer 3

实际上，两者都可以实现您想要的一切。但我的经验是，Grid 使用起来更舒服。

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

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

在此处查看功能：

https://vaadin.com/grid

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

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

Answer 4

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

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

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

private void buildPagedGrid(Class<T> clazz) {

     setWidth("100%");      
     setSelectionMode(SelectionMode.SINGLE);
     setImmediate(true);        
     setSizeFull();
     setContainerDataSource(dataSource);
     setFooterVisible(true);
}