java Vaadin 网格与表格

Vaadin Grid vs Table

提问by Daniel Hári

What is the difference between the Gridand Tablecomponents in Vaadin7?

Vaadin7 中的Grid和Table组件之间有什么区别？

Which should I use, and when?

我应该使用哪个，何时使用？

采纳答案by Vojtech Ruzicka

Grid is a new more powerful component which is supposed to be the successor of Table (see The Table is dead, long live the Grid). So there should not be any need to favor Table over Grid.

Grid 是一个新的更强大的组件，它应该是 Table 的继承者（参见The Table is dead, long live the Grid）。所以不应该有任何需要支持表格而不是网格。

Here is a first in the series of articles by Vaadin aboout migrating from Table to Grid: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic

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

回答by Basil Bourque

Summary

概括

Grid→ New & Amazing
Table→ Venerable & Reliable

格子→新的和惊人的
表→可敬的和可靠的

Tableis a very good data-grid display widget built into the earliest versions of Vaadin.

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

Gridis grand rewrite from scratch, designed to supplant Table. The Vaadin team is leveraging their wisdom gained from experience, “if we knew then what we know now”, to make the very best data-grid possible given today's Web technology. Grid is such a big deal that it gets its own vanity page. See this company blog postfor a quick overview.

Grid是从头开始重写，旨在取代 Table。Vaadin 团队正在利用他们从经验中获得的智慧，“如果我们当时知道我们现在所知道的”，在当今的 Web 技术下，使最好的数据网格成为可能。网格是如此重要，以至于它拥有自己的虚荣页面。有关快速概览，请参阅此公司博客文章。

So, generally speaking, I suggest you focus on Grid. Try it out, learn it first, and see if it meets your needs. If you run into bugs or problems, or you have need features lacking in Grid, then fallback to Table. You can mix-and-match both in a project, with the caveat that the different appearance and behavior may confuse your users.

所以，一般来说，我建议你关注 Grid。尝试一下，先学习一下，看看它是否满足您的需求。如果您遇到错误或问题，或者您需要 Grid 中缺少的功能，则回退到 Table。您可以在项目中混合搭配两者，但需要注意的是，不同的外观和行为可能会使您的用户感到困惑。

Think of Gridas the precocious adolescent full of promise and eager to make the leap into adulthood, and Tableas the mature grownup working hard in its prime years of middle-age while dreaming of a well-earned future retirement sailing into the sunset.

将Grid视为充满希望并渴望进入成年期的早熟青少年，而将Table视为成熟的成年人，在中年的黄金岁月里努力工作，同时梦想着在日落时分赚取丰厚的退休金。

Details

细节

If using Vaadin 6, on a continuing project or you need to support very old browsers, then Tableis your only choice. Gridrequires Vaadin 7 or later.

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

Here are some major Table features currently lacking in Grid.

以下是 Grid 目前缺乏的一些主要表格功能。

• Drag-and-drop features (to be added later).
• Resize column by user dragging edge of column header.

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

Both share many features. They practice lazy-loading to the browser, automatically loading data only as needed from the server-side so as to not overload the web browser. Both allow the user to drag columns to re-order. Both let the user show/hide columns.

两者都有许多共同点。他们练习延迟加载到浏览器，仅在需要时从服务器端自动加载数据，以免网络浏览器过载。两者都允许用户拖动列来重新排序。两者都让用户显示/隐藏列。

Row Selection

行选择

Both allow selecting single rows or multiple rows.

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

Grid also has an automatic feature where it adds a column of checkboxes. The user can select multiple rows by clicking those checkboxes rather than using a mouse or mouse+keyboard. Many, if not most, users are clumsy with mouse-driven multiple row selection. See this screenshot, and notice the very first column.

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

The programming support for selection is different. Grid does not extend AbstractSelect, instead defines its own selection API. Call addSelectionListener()and define a SelectionListener. See The Book Of Vaadin.

对选择的编程支持是不同的。Grid 没有扩展AbstractSelect，而是定义了自己的选择 API。调用addSelectionListener()并定义一个SelectionListener. 参见Vaadin 之书。

Headers & Footers

页眉和页脚

Both have headers and footers, but Grid has more options. Grid can place widgets instead of text. Grid can have multiple rows of headers. Grid can join header cells, like spanning in an HTML table.

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

In-Place Editing

就地编辑

Both provide in-place editing of data, but in different ways. Table allows editing of data in the cell. Grid took a different approach, for editing the entire row by displaying a mini-window, a little data-entry form. This form includes a pair of confirmation & cancellation buttons. This form is much more flexible than Table's cell-editing.

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

Filtering

过滤

Grid offers user-controlled filtering, where a row of enterable cells appears below the headers. As users type a filter is applied to show only matching rows. See this screenshot. With Table, you need to create some kind of user-interface and apply the filtering.

网格提供用户控制的过滤，其中在标题下方出现一行可输入的单元格。当用户键入时，会应用过滤器以仅显示匹配的行。请参阅此屏幕截图。使用 Table，您需要创建某种用户界面并应用过滤。

Backed By Data Container

由数据容器支持

UPDATE:Vaadin 8 brings a new version of Grid that leverages a newly improved and greatly simplified data model. This is a majorreason to use Grid instead of Table. Note that both the original Grid as well as Table are still available in Vaadin 8 via the Vaadin 7 compatibility layer.

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

The following old info left intact…

以下旧信息完好无损……

Both Table and Grid are a presentation-only widget, backed by a separate data object implementing the Containerinterface according to the Vaadin Data Model.

Table 和 Grid 都是仅用于表示的小部件，由Container根据Vaadin 数据模型实现接口的单独数据对象支持。

The Table class also acts asa Container which always confused me. I'm glad to see Grid maintain a more clear distinct separation.

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

Like Table, Grid does offer some convenience methods for quick-and-dirty situations where you want to throw some data at the Grid itself without formally producing a Container. But Grid's convenience methods use rowand columnterms in contrast to the Container's itemand propertyterms. These terms make it more clear that your are talking to the Grid but the Grid is acting on its default attached IndexedContainerinstance on your behalf.

与 Table 一样，Grid 确实为快速而肮脏的情况提供了一些方便的方法，在这些情况下，您想在不正式生成容器的情况下将一些数据扔到 Grid 本身。但是 Grid 的便捷方法使用行和列术语与 Container 的项目和属性术语形成对比。这些术语更清楚地表明您正在与网格交谈，但网格IndexedContainer代表您对其默认附加实例进行操作。

Cell Content

单元格内容

UPDATE:In Vaadin 8.1, Grid gains the ability to display a Component in a cell. See a live demo of the Component Renderer.

更新：在 Vaadin 8.1 中，Grid 获得了在单元格中显示组件的能力。查看组件渲染器的现场演示。

Cell content handling is different. Grid cannot directly display column icons, nor can it place components (widgets) in a cell. Instead used the new Rendererfeatures.

单元格内容处理是不同的。Grid 不能直接显示列图标，也不能在单元格中放置组件（小部件）。而是使用了新Renderer功能。

Doc & Demo

文档和演示

Both have a chapter in The Book Of Vaadin, one for Tableand one for Grid.

两者在一章书的Vaadin，一个表和一个网格。

Both have a live demos. One for Table(and TreeTable). And a couple for Grid, one full-windowand one with various aspects.

两者都有现场演示。一个用于 Table（和TreeTable）。还有一对 Grid，一个是全窗口的，一个是多方面的。

See this brochure page for Grid, including an embedded live demo, with a link to further demos.

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

Miscellaneous Differences

杂项差异

Grid has a built-in widget for displaying a number as a small thermometer widget. See this screenshot, in the last column.

Grid 有一个内置的小部件，用于将数字显示为一个小的温度计小部件。在最后一栏中查看此屏幕截图。

For more specific differences, see section 5.24.1 Overview –?Differences To Tablein The Book Of Vaadin.

有关更具体的差异，请参阅The Book Of Vaadin中的第5.24.1节概述 –?Differences To Table。

Esoterica… Grid is the first component in Vaadin Components, a high quality set of Web Components built on Google Polymerthat is ready to be used with any framework that supports Web Components. While the Vaadin team has promised to support Table for years in the future, don't expect it to receive such special attention.

Esoterica... Grid 是Vaadin Components 中的第一个组件，这是一组基于Google Polymer构建的高质量 Web 组件，可以与任何支持Web 组件的框架一起使用。虽然 Vaadin 团队承诺在未来几年内支持 Table，但不要指望它会受到如此特别的关注。

Vaadin 8

瓦丁 8

In Vaadin 8.0 and 8.1, Grid is getting even better. Major enhancements include:

在 Vaadin 8.0 和 8.1 中，Grid 变得更好了。主要改进包括：

• Works with the simpler sleeker data model new in Vaadin 8
  • Pass a collection of entities for display
  • Easily define columns with type-safe lambda syntax
    grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
  • Easier lazy-loading of data now that Containeris gone:
    grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
• The ability to display Vaadin components rather than just renderers
• Drag-and-drop via the drag-and-drop support defined by HTML5.
• Even more speed

• 与 Vaadin 8 中新的更简单、更流畅的数据模型配合使用
  • 传递实体集合进行展示
  • 使用类型安全的 lambda 语法轻松定义列
    grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
  • 现在更容易延迟加载数据Container了：
    grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
• 能够显示 Vaadin 组件而不仅仅是渲染器
• 通过 HTML5 定义的拖放支持进行拖放。
• 速度更快

The Table component is still available via the Compatibility layer in Vaadin 8 for continuing the use of Vaadin 7 classes.

Table 组件仍可通过 Vaadin 8 中的 Compatibility 层使用，以继续使用 Vaadin 7 类。

Future

未来

The Vaadin team has great plans for Grid, so much of what you read on StackOverflow page will change. The team will be eagerly adding features, enhancements, and bug fixes in the coming months and years. Many enhancements have already been made to Grid in its short history, so beware when reading older documents about limitations or lacking features –?that may not be so anymore.

Vaadin 团队为 Grid 制定了很好的计划，因此您在 StackOverflow 页面上阅读的大部分内容都会发生变化。该团队将在未来几个月和几年内热切地添加功能、增强功能和错误修复。Grid 在其短暂的历史中已经进行了许多改进，因此在阅读有关限制或缺乏功能的旧文档时要小心——可能不再如此。

回答by fuma

Actually it's possible to implement everything you want with both of them. But my experience is, that the Grid is more comfortable to use.

实际上，可以用它们来实现你想要的一切。但我的经验是，网格使用起来更舒适。

The Tableis easy to understand and easy to use for simple tables (as you might guess). So if you just want to show a few lines of data visualized nicely - use the Table.It is stable and works well on that.

对于简单的表格（您可能会猜到），该表格易于理解和使用。因此，如果您只想显示几行可视化的数据，请使用表格。它很稳定并且在这方面运行良好。

The Gridlooks like a Table but it has some features towards the Table. If you have a whole lot of data to render the Grid might handle it better. Also there is a good practice for "inline editing" your data. There is a way to customise the headers of a grid extensively. If you want to do a lot of customisation and interaction inside a table-like component - use the Grid.

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

See the features here:

在此处查看功能：

https://vaadin.com/grid

https://vaadin.com/grid

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

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

There is a difference how you can select rows/cells in these two components. For example the EventListeners for selection are used slightly different concerning the value they return. Also there's a difference in how you add columns and rows to them, but thats just an implementation thing, so it shouldn't really matter.

在这两个组件中选择行/单元格的方式有所不同。例如，用于选择的 EventListeners 的使用与它们返回的值略有不同。向它们添加列和行的方式也有所不同，但这只是一个实现问题，所以它应该无关紧要。

回答by fani

In filter table ,if we clicking on the table header,first row will be defaultly highlighted by a method called setSelectable(true);but in grid table there is no such type of action,

在过滤表中，如果我们点击表头，第一行将被一个名为setSelectable(true)的方法默认高亮显示；但是在网格表中没有这种类型的动作，

I want to apply the same action in grid table. Is there any possibilty for having that nature? Is there any method or code available?

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

Below is the code I used in my grid table:

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

private void buildPagedGrid(Class<T> clazz) {

     setWidth("100%");      
     setSelectionMode(SelectionMode.SINGLE);
     setImmediate(true);        
     setSizeFull();
     setContainerDataSource(dataSource);
     setFooterVisible(true);
}