Grid → 新的和惊人的
Table → 庄严而可靠的
Table
是内置于早期版本的 Vaadin 中非常好的数据网格显示小部件。
Grid
是完全重新编写的,旨在取代 Table。Vaadin 团队利用他们从经验中获得的智慧,“如果当时我们知道现在知道的事情”,以根据当今的 Web 技术制作最好的数据网格。 Grid 太重要了,以至于它有自己的 专门页面。请参阅此公司博客文章,了解快速概述。
如果使用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本身传递数据,而不必正式生成一个容器。但是,与容器中使用的item和property术语相比,Grid的方便方法使用row和column术语。这些术语使得更加清楚你正在与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.0和8.1中,Grid变得更加优秀。主要增强包括:
grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
Container
已经消失:grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
Table组件仍然通过Vaadin 8中的兼容层提供,以继续使用Vaadin 7类。
Grid是一种更加强大的新组件,应该是Table的继任者(参见The Table is dead, long live the Grid)。因此,没有必要偏爱Table而不是Grid。
以下是Vaadin有关从Table迁移到Grid的系列文章中的第一篇: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
在这两个组件中,您选择行/单元格的方式有所不同。例如,有关选择的EventListeners在返回值方面略有不同。此外,在向它们添加列和行方面也存在差异,但这只是一种实现方式,因此并不真正重要。
以下是我在网格表中使用的代码:我想在网格表中应用相同的操作。是否有可能具备这种特性?是否有可用的方法或代码?
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}