从表格迁移到网格 vaadin答案

【问题标题】：Migration from table to grid vaadin从表格迁移到网格 vaadin
【发布时间】：2019-07-30 06:41:27
【问题描述】：

我需要使用 vaadin 创建一个具有 2 行和 3 列的表，以添加到我现有的界面中。我怎样才能用网格做到这一点。我是 Vaadin 的新手，所以请任何人帮助我。我只想在我的布局中添加一个表格而不添加数据。

@Route("Playboard")
@StyleSheet("frontend://styles/style.css")
public class Playboard extends VerticalLayout {

public Playboard() {
    setLayout();
    addClassName("play-board");
    setSizeFull();

}

private void setLayout() {
HorizontalLayout playboard = new HorizontalLayout();
H1 text1 = new H1("Playerboard");
playboard.add(text1);
add(playboard);
addClassName("player-board");
setAlignItems(Alignment.CENTER);
getElement().getThemeList().add("dark");

VerticalLayout n1 = new VerticalLayout();
Label label = new Label("Name :");
label.addClassName("player-name");
Label name = new Label("");
name.addClassName("players-name");
n1.add(label, name);
add(n1); }}

这是我的界面，我需要在此处显示一个表格，其中包含 3 列和 2 行，没有任何数据。我可以在垂直布局中显示它吗？你能帮我解决这个问题吗？

感谢您的宝贵时间 :)

【问题讨论】：

你的框架版本是什么？还有，为什么要使用 GridLayout 而不是 Grid？
您在寻找 GridLayout 还是 Grid？至少，在 Vaadin 的有关 Grid 的官方文档中提供了很多示例。你的细胞的内容是什么？它是表格数据还是某些组件？您使用的确切版本是什么？这些页面可能对 Vaadin 10+ 有帮助：-Java Examples for a Grid-[网格简介](vaadin.com/docs/v13/flow/components/tutorial-flow-grid.html)
第 13 版。我如何使用网格来做到这一点我是新手，请您解释一下。
你有什么类型的数据？
我只想在我的布局中显示一个表格而不添加数据我该怎么做。

标签： java vaadin

【解决方案1】：

正如其他人所说，您是否想要布局组件的布局或表格数据的网格有点不清楚。

如果您需要表格数据，这里是一个三列两行的 Grid 示例。

@Route
public class MainView extends VerticalLayout {
    public MainView(@Autowired MessageBean bean) {
        Button button = new Button("Click me",
                e -> Notification.show(bean.getMessage()));
        GridPro<Person> grid = new GridPro<>();
        grid.setItems(
                new Person("Steve", "Winchester", "Chengdu"),
                new Person("Bob", "Martin", "Turku");
        grid.addColumn(Person::getFirstName).setHeader("First name");
        grid.addColumn(Person::getLastName).setHeader("Last name");
        grid.addColumn(Person::getCity).setHeader("City");
        add(grid);
    }
}

Person 是一个普通的 Java 对象，具有字符串属性 firstName、lastName 和 city，以及关联的 getter 和 setter。

【讨论】：