Vaadin Grid和Table的比较

19

GridTable组件在Vaadin 7中有什么区别?

我应该使用哪个组件,何时使用?

4个回答

24

概要

Grid → 新的和惊人的
Table → 庄严而可靠的

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

Grid 是完全重新编写的,旨在取代 Table。Vaadin 团队利用他们从经验中获得的智慧,“如果当时我们知道现在知道的事情”,以根据当今的 Web 技术制作最好的数据网格。 Grid 太重要了,以至于它有自己的 专门页面。请参阅此公司博客文章,了解快速概述。

一般来说,我建议您专注于Grid。先试用它,学习它,看看它是否符合您的需求。如果遇到错误或问题,或者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具有更多选项。Grid可以放置小部件而不是文本。Grid可以拥有多行标题。Grid可以合并标题单元格,就像在HTML表格中跨越一样。

原地编辑

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

筛选

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

由数据容器支持

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

以下旧信息保持不变...

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

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

与Table类似,Grid也提供了一些方便的方法,用于快速、简单地向Grid本身传递数据,而不必正式生成一个容器。但是,与容器中使用的itemproperty术语相比,Grid的方便方法使用rowcolumn术语。这些术语使得更加清楚你正在与Grid交互,但Grid代表你在其默认附加的IndexedContainer实例上执行操作。

单元格内容

更新:在Vaadin 8.1中,Grid具有显示单元格组件的能力。请看组件渲染器的演示

单元格内容处理方式不同。Grid不能直接显示列图标,也不能将组件(小部件)放入单元格中。而是使用新的Renderer功能。

文档和演示

两者都在Vaadin之书中有章节,一个是Table的章节一个是Grid的章节

两者都有实时演示。Table有一个(还有TreeTable)。Grid有两个,一个全屏窗口一个包含各种方面

请参阅Grid的宣传页,其中包含嵌入的实时演示,并链接到更多演示。

其他差异

Grid内置了一个小型温度计部件,用于显示数字。请参见此截图,位于最后一列。

有关更具体的差异,请参阅Vaadin之书中的5.24.1概述-与表的差异部分。

Esoterica… Grid是Vaadin组件中的第一个组件,这是一个高质量的Web组件集,构建在Google Polymer上,并准备好与支持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已经进行了许多改进,因此当阅读关于限制或缺少功能的旧文档时要小心 - 这可能已经不再是问题了。

15

4
网格(Grid)目前是一个全新的组件,存在一些性能问题,并且并未实现所有功能。因此,网格是正确的选择,但根据您的需求,有时它还不具备生产质量。 - André Schild

1
实际上,两者都可以实现您想要的一切。但我的经验是,Grid 更舒适易用。
Table 易于理解和使用,适用于简单的表格(正如您可能猜到的那样)。所以,如果您只想展示几行数据并将其可视化 - 使用 Table。它很稳定,在这方面工作得很好。
Grid 看起来像一个表格,但它对表格有一些特殊的功能。如果您有大量数据需要呈现,则 Grid 可能会更好地处理它。此外,还有一种良好的实践方法可以“内联编辑”您的数据。还有一种方式可以广泛自定义网格的标题。如果您想在类似表格的组件内进行大量自定义和交互,请使用 Grid。
请在此处查看功能:

https://vaadin.com/grid

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

在这两个组件中,您选择行/单元格的方式有所不同。例如,有关选择的EventListeners在返回值方面略有不同。此外,在向它们添加列和行方面也存在差异,但这只是一种实现方式,因此并不真正重要。


0
在筛选表中,如果我们点击表头,第一行将默认高亮显示,这是通过一个名为setSelectable(true);的方法实现的。但在网格表中没有这种类型的操作,

我想在网格表中应用相同的操作。是否有可能具备这种特性?是否有可用的方法或代码?

以下是我在网格表中使用的代码:
private void buildPagedGrid(Class<T> clazz) {

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接