Vaadin Grid vs Table
Vaadin 7中的Grid
和Table
组件有什么区别?
我应该使用哪种,何时使用?
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的实时演示 。
细胞内容处理是不同的。 网格不能直接显示列图标,也不能将组件(小部件)放在单元格中。 而是使用了新的Renderer
function。
文档和演示
两本书都有一本书中的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:
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); }