Vaadin Grid vs Table

Question

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

我应该使用哪种,何时使用？

Answer 1

摘要

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

Table 是最早版本的Vaadin内置的非常好的数据网格显示小部件.

Grid是从头开始的重写,旨在取代表.Vaadin团队利用他们从经验中获得的智慧,"如果我们知道我们现在所知道的",就可以根据当今的Web技术制作最好的数据网格.网格是如此重要,它有自己的虚荣页面.有关快速概述,请参阅此公司博客文章.

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

想想Grid是充满希望的早熟青少年,渴望成长为成年人,而Table就是成熟的成年人,在中年的黄金时期努力工作,同时梦想着未来的退休航行到日落.

细节

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

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

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

两者共享许多功能.他们对浏览器进行延迟加载,只在需要时从服务器端自动加载数据,以免过载Web浏览器.两者都允许用户拖动列以重新排序.两者都让用户显示/隐藏列.

行选择

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

网格还有一个自动功能,它添加了一列复选框.用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来选择多行.许多(如果不是大多数)用户使用鼠标驱动的多行选择是笨拙的.请参阅此屏幕截图,并注意第一列.

选择的编程支持是不同的.Grid不扩展AbstractSelect,而是定义自己的选择API.打电话addSelectionListener()并定义一个SelectionListener.参见The Book of Vaadin.

页眉和页脚

两者都有页眉和页脚,但Grid有更多选项.网格可以放置小部件而不是文本.网格可以有多行标题.网格可以连接标题单元格,例如跨越HTML表格.

就地编辑

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

过滤

Grid提供用户控制的过滤,其中一行可输入单元格出现在标题下方.在用户类型中,应用过滤器仅显示匹配的行.看这个截图.使用Table,您需要创建某种用户界面并应用过滤.

由数据容器支持

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

以下旧信息完好无损......

Table和Grid都是一个仅呈现的小部件,由Container根据Vaadin数据模型实现接口的单独数据对象支持.

表类还充当作为一个容器,它总是让我感到困惑.我很高兴看到Grid保持更清晰明显的分离.

与Table一样,Grid确实为快速和脏的情况提供了一些便利方法,在这种情况下,您希望在Grid上自己抛出一些数据而不正式生成Container.但Grid的便捷方法使用行和列术语,而不是Container的项目和属性术语.这些术语使您更清楚地知道您正在与网格交谈,但网格IndexedContainer代表您的默认附加实例.

细胞内容

更新:在Vaadin 8.1中,Grid获得了在单元格中显示Component的功能.查看Component Renderer的实时演示.

细胞内容处理是不同的.网格不能直接显示列图标,也不能将组件(小部件)放在单元格中.而是使用了新Renderer功能.

文档和演示

两者在一章书的Vaadin,一个表和一个网格.

两者都有现场演示.一个用于表(和TreeTable).还有一对Grid,一个全窗口,一个有各个方面.

请参阅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进行了许多增强,因此在阅读有关限制或缺少功能的旧文档时要小心 - 可能不再如此.

Answer 2

Grid是一个新的更强大的组件,它应该是Table的继承者(参见表格已经死了,网格也很长).所以不应该有任何需要支持Table over Grid.

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