如何在 Vaadin Flow 14 中创建一个简单的 HTML 表格

Posted 2023-03-05

【中文标题】如何在 Vaadin Flow 14 中创建一个简单的 HTML 表格

【英文标题】：How to create a simple HTML table in Vaadin Flow 14

【发布时间】：2022-01-21 21:52:51

【问题描述】：

我想在 Vaadin 流程中创建一个简单的 html 表格，但该组件不再存在（以前以 com.vaadin.ui.Table 的形式提供）。该表旨在显示在 Grid 中选择的项目的详细属性（键值对）。

我可以使用什么 Vaadin Flow 组件来实现这一点？为什么首先在 Vaadin Flow 中删除了表格？

【参考方案1】：

表格实际上已经在 Vaadin8 中被删除。 https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-intro

要在 Flow 中实现表格，有几个选择。 一种是使用Element API，一种是为表格创建组件。

对于元素 API 版本，它可能类似于：

Element table = new Element("table");
For(item : item rows to add) 
  Element tr = new Element("tr");
  table.appendChild(tr);
  For(int i = 0; i < dataColumns; i++) 
    Element td = new Element("td");
// could perhaps append a span with text context.
    td.setText(item text for column i);
    tr.appendChild(td);
  

对于组件方法，基本情况可能是将这 3 个元素实现为：

@Tag("table")
public class Table extends Component implements HasComponents 

    public Row addRow() 
        Row row = new Row();
        add(row);
        return row;
    

    public Row getRow(int row) 
        final Optional<Component> rowOptional = getElement().getChild(row)
                .getComponent();
        if(rowOptional.isPresent())
            return (Row) rowOptional.get();
        return null;
    


@Tag("tr")
public class Row extends Component 
    public void add(Cell cell) 
        getElement().appendChild(cell.getElement());
    
    public int getRow() 
        return getElement().getParent().indexOfChild(getElement());
    


@Tag("td")
public class Cell extends Component 
    
    public int getCol() 
        return getElement().getParent().indexOfChild(getElement());
    

    public int getRow() 
        return ((Row) getParent().get()).getRow();
    

    public void setText(String text) 
        getElement().setText(text);
    

【讨论】：

非常感谢，@Mikael。这对我来说很好。为这样一个标准的 HTML 元素创建自己的组件似乎很尴尬。我希望该框架能够提供开箱即用的东西，但我仍然不明白为什么要删除表格。

我不会真正将旧的 Vaadin Table 称为“简单”，它是一个非常古老且臃肿的组件，具有大量难以维护且完全不可能更新到现代标准的功能。于是改写成Grid。这不是直接匹配，因为一些旧功能依赖于旧设计，这在其他地方造成了很多很多问题，而且许多新功能在旧设计中是不可能实现的。如果您真的喜欢 Table，仍然可以通过 MPR（vaadin.com/multiplatform-runtime，商业）将它与 V14 一起使用，但在这里可能有点矫枉过正。

我同意安娜所说的。但是，我确实看到了一个真正“简单”的数据表组件的位置。具有某种数据提供者 API 的组件，可以轻松地将项目传递给它，然后是一些配置选项如何呈现项目道具。也许排序。但没有延迟加载。没有虚拟行或列渲染。没有过滤。没有列组。没有冻结/粘性列。没有行详细信息。我想你明白了。

【参考方案2】：

Table 组件可以有多个用例。 Vaadin 的社区组件目录中有几个替代方案。

显示数据列表的表格（类似于 Grid，但更轻量级的方法）

https://vaadin.com/directory/component/beantable

表格作为布局组件，支持行跨度、列跨度等，您可以单独填充每个单元格。

https://vaadin.com/directory/component/html-table

由于这些用例完全不同，它们由不同的 Java API 更好地满足，尽管它们产生的 HTML DOM 结构非常相似。这些插件都没有尝试重现 Vaadin 7 Table 组件的 API。

Cookbook 中也有一个菜谱，如何在 Grid details 行的 TemplateRenderer 中生成 Table。

https://cookbook.vaadin.com/grid-details-table