我应该使用哪个,何时使用?
4 回答
概括
网格→ 新的和惊人的
表→ 可敬的和可靠的
Table
是一个非常好的数据网格显示小部件,内置在最早的 Vaadin 版本中。
Grid
是从头开始的大重写,旨在取代 Table。Vaadin 团队正在利用他们从经验中获得的智慧,“如果我们当时就知道我们现在所知道的”,以在当今的 Web 技术的情况下实现最好的数据网格。网格是如此重要,以至于它拥有自己的虚荣页面。请参阅此公司博客文章以获得快速概述。
所以,一般来说,我建议你专注于 Grid。尝试一下,先学习一下,看看它是否满足您的需求。如果您遇到错误或问题,或者您需要 Grid 中缺少的功能,则回退到 Table。您可以在一个项目中混合搭配两者,但需要注意的是不同的外观和行为可能会使您的用户感到困惑。
将Grid想象成一个早熟的少年,充满希望并渴望跨入成年期,而Table则是一个成熟的成年人,在中年的黄金岁月里努力工作,同时梦想着一个来之不易的退休生活,驶向日落。
细节
如果在持续项目中使用 Vaadin 6,或者您需要支持非常旧的浏览器,那么Table
这是您唯一的选择。Grid
需要 Vaadin 7 或更高版本。
以下是 Grid 目前缺少的一些主要表格功能。
- 拖放功能(稍后添加)。
- 通过用户拖动列标题的边缘来调整列的大小。
两者都有许多共同特点。他们练习延迟加载到浏览器,仅根据需要从服务器端自动加载数据,以免网络浏览器过载。两者都允许用户拖动列以重新排序。两者都让用户显示/隐藏列。
行选择
两者都允许选择单行或多行。
Grid 还有一个自动功能,它会添加一列复选框。用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来选择多行。许多(如果不是大多数)用户对鼠标驱动的多行选择很笨拙。查看此屏幕截图,并注意第一列。
选择的编程支持不同。Grid 没有扩展AbstractSelect
,而是定义了自己的选择 API。调用addSelectionListener()
并定义一个SelectionListener
. 参见Vaadin 之书。
页眉和页脚
两者都有页眉和页脚,但 Grid 有更多选择。网格可以放置小部件而不是文本。网格可以有多行标题。网格可以连接标题单元格,就像在 HTML 表格中跨越一样。
就地编辑
两者都提供数据的就地编辑,但方式不同。表格允许编辑单元格中的数据。Grid 采用了不同的方法,通过显示一个迷你窗口、一个小的数据输入表单来编辑整行。此表单包括一对确认和取消按钮。这种形式比 Table 的单元格编辑灵活得多。
过滤
Grid 提供用户控制的过滤,其中一行可输入的单元格出现在标题下方。当用户键入时,将应用过滤器以仅显示匹配的行。请参阅此屏幕截图。使用 Table,您需要创建某种用户界面并应用过滤。
由数据容器支持
更新: Vaadin 8 带来了一个新版本的 Grid,它利用了新改进和大大简化的数据模型。这是使用 Grid 而不是 Table 的主要原因。请注意,原始 Grid 和 Table 在 Vaadin 8 中仍然可以通过Vaadin 7 兼容层使用。
以下旧信息完好无损……</p>
Table 和 Grid 都是仅展示的小部件,由一个单独的数据对象支持,该对象Container
根据Vaadin 数据模型实现接口。
Table 类也充当Container,这总是让我感到困惑。我很高兴看到 Grid 保持更清晰的分离。
像 Table 一样,Grid 确实提供了一些方便的方法,用于在不正式生成 Container 的情况下将一些数据扔到 Grid 本身的快速和肮脏的情况。但是 Grid 的便捷方法使用行和列项,而不是 Container 的项和属性项。这些术语更清楚地表明您正在与 Grid 交谈,但 GridIndexedContainer
代表您对其默认附加实例进行操作。
单元格内容
更新:在 Vaadin 8.1 中,Grid 获得了在单元格中显示组件的能力。查看组件渲染器的现场演示。
单元格内容处理不同。Grid 不能直接显示列图标,也不能在单元格中放置组件(小部件)。而是使用了新Renderer
功能。
文档和演示
两者都在The Book Of Vaadin中有一章,一章用于 Table,一章用于 Grid。
两者都有现场演示。一个用于 Table(和TreeTable)。还有一对网格,一个全窗口,一个具有各种方面。
请参阅 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 在其短暂的历史中已经进行了许多增强,因此在阅读有关限制或缺乏功能的旧文档时要小心 - 可能不再如此。
Grid 是一个新的更强大的组件,它应该是 Table 的继承者(请参阅The Table is dead, long live the Grid)。所以应该没有必要偏爱表格而不是网格。
这是 Vaadin 关于从表迁移到网格的系列文章中的第一篇: https ://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
实际上,可以用它们来实现你想要的一切。但我的经验是,Grid 使用起来更舒服。
该表易于理解且易于用于简单表(您可能猜到了)。因此,如果您只想很好地显示几行数据 - 使用表格。它很稳定,并且在这方面效果很好。
网格看起来像一个表格,但它有一些表格的特征。如果您有大量数据来呈现网格可能会更好地处理它。还有一个很好的做法是“内联编辑”您的数据。有一种方法可以广泛地自定义网格的标题。如果您想在类似表格的组件中进行大量自定义和交互,请使用 Grid。
在此处查看功能:
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
在这两个组件中选择行/单元格的方式有所不同。例如,用于选择的 EventListener 在返回值方面略有不同。此外,向它们添加列和行的方式也有所不同,但这只是实现的事情,所以这并不重要。
在过滤表中,如果我们点击表头,第一行将默认通过一个名为setSelectable(true) 的方法突出显示;但在网格表中没有这种类型的动作,
我想在网格表中应用相同的操作。有没有可能拥有这种性质?有没有可用的方法或代码?
下面是我在网格表中使用的代码:
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}