Vaadin Grid vs Table

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

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

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

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

概要

网格 →新的和惊人的
→尊贵可靠

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

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

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

想想格子是充满希望的早熟青少年,渴望成长为成年人,而帕克是成熟的成年人,在中年的黄金时期努力工作,同时梦想着一个来之不易的未来退休航行到日落。

细节

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

以下是Grid目前缺少的一些主要Tablefunction。

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

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

行选择

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

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

选择的编程支持是不同的。 Grid不扩展AbstractSelect ,而是定义自己的选择API。 调用addSelectionListener()并定义SelectionListener 。 参见The Vaadin 。

页眉和页脚

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

就地编辑

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

过滤

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

由数据容器支持

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

以下旧信息完好无损……

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

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

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

细胞内容

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

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

文档和演示

两本书都有一本书中的Vaadin , 一个用于表格 , 一个用于网格 。

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

请参阅Grid的这个手册页 ,包括嵌入式现场演示,以及进一步演示的链接。

杂项差异

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

有关更具体的差异,请参阅第5.24.1节概述 – Vaadin书中与 表的差异 。

Esoterica …网格是Vaadin组件中的第一个组件, Vaadin组件是一种基于Google Polymer构建的高质量Web组件,可以与任何支持Web组件的框架一起使用。 尽管Vaadin团队承诺将来支持Table多年,但不要指望它会得到如此特别的关注。

瓦丁8

在Vaadin 8.0和8.1中,Grid变得更好。 主要增强function包括:

  • 使用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页面上阅读的内容将发生很大变化。 该团队将在未来几个月和几年内急切地添加function,增强function和错误修复程序。 在其短暂的历史中已经对Grid进行了许多增强,因此在阅读有关限制或缺少function的旧文档时要小心 – 可能不再如此。

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

表格易于理解,易于用于简单表格(您可能会猜到)。 因此, 如果您只想显示几行数据,请使用表格。 它很稳定,效果很好。

Grid看起来像一个表,但它具有一些表的function。 如果要渲染大量数据,Grid可能会更好地处理它。 此外,还有一种“内联编辑”数据的良好做法。 有一种方法可以广泛地自定义网格的标题。 如果要在类似表的组件中进行大量自定义和交互 – 请使用Grid。

查看此处的function:

https://vaadin.com/grid

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

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

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

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

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

 private void buildPagedGrid(Class clazz) { setWidth("100%"); setSelectionMode(SelectionMode.SINGLE); setImmediate(true); setSizeFull(); setContainerDataSource(dataSource); setFooterVisible(true); }