27.md

# Vaadin `Grid`教程

> 原文： [http://zetcode.com/vaadin/grid/](http://zetcode.com/vaadin/grid/)

在 Vaadin Grid 教程中，我们学习了 Vaadin Grid 组件的基础知识。 Vaadin 网格示例显示网格中来自 MySQL 数据库的数据。

## Vaadin 框架

Vaadin 是一种流行的 Java Web 开发框架，用于构建单页 Web 应用。

## Vaadin `Grid`

`Grid`组件用于显示和编辑以行和列排列的表格数据。

## Vaadin `Grid`示例

以下示例演示了 Vaadin `Grid`组件的用法。 我们从 MySQL 数据库加载数据并将其显示在`Grid`组件中。

NetBeans IDE 可用于轻松创建 Vaadin Web 应用。 我们需要安装 NetBeans Vaadin 插件，然后创建一个新的 Vaadin Web 应用项目。

```java
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.42</version>
</dependency>

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.3.9.RELEASE</version>
</dependency>

```

我们向 POM 文件添加了两个依赖关系：MySQL 驱动程序和 JdbcTemplate 库。 JdbcTemplate 简化了 Java 中的数据库编程。

`cars_mysql.java`

```java
-- SQL for the Cars table

CREATE TABLE Cars(Id BIGINT PRIMARY KEY AUTO_INCREMENT, 
        Name VARCHAR(150), Price INTEGER);

INSERT INTO Cars(Name, Price) VALUES('Audi', 52642);
INSERT INTO Cars(Name, Price) VALUES('Mercedes', 57127);
INSERT INTO Cars(Name, Price) VALUES('Skoda', 9000);
INSERT INTO Cars(Name, Price) VALUES('Volvo', 29000);
INSERT INTO Cars(Name, Price) VALUES('Bentley', 350000);
INSERT INTO Cars(Name, Price) VALUES('Citroen', 21000);
INSERT INTO Cars(Name, Price) VALUES('Hummer', 41400);
INSERT INTO Cars(Name, Price) VALUES('Volkswagen', 21600);

```

这是 MySQL 数据库表的数据。

`MyUI.java`

```java
package com.zetcode.main;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.zetcode.bean.Car;
import com.zetcode.service.ReadCars;
import java.util.List;

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        VerticalLayout vbox = new VerticalLayout();

        HorizontalLayout hbox = new HorizontalLayout();

        Grid grid = new Grid();

        grid.addColumn("Id", Long.class);
        grid.addColumn("Name", String.class);
        grid.addColumn("Price", Integer.class);

        Button loadButton = new Button("Load data");
        loadButton.addClickListener(e -> {

            grid.getContainerDataSource().removeAllItems();

            List<Car> cars = ReadCars.read();

            for (Car car : cars) {

                grid.addRow(car.getId(), car.getName(), car.getPrice());
            }
        });

        Button clearButton = new Button("Clear data");
        clearButton.addClickListener(e -> {
            grid.getContainerDataSource().removeAllItems();
        });

        vbox.addComponents(grid);
        hbox.addComponents(loadButton, clearButton);
        hbox.setSpacing(true);
        vbox.addComponent(hbox);
        vbox.setMargin(true);
        vbox.setSpacing(true);

        setContent(vbox);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

```

这是`MyUI`类。 它是应用的入口点。 我们有一个`Grid`组件和两个按钮。 一个按钮从数据库中加载数据并将其插入`Grid`，另一按钮从`Grid`中删除数据。

```java
VerticalLayout vbox = new VerticalLayout();

HorizontalLayout hbox = new HorizontalLayout();

```

要创建布局，我们使用`HorizontalLayout`和`VerticalLayout`。

```java
Grid grid = new Grid();

```

`Grid`组件已创建。

```java
grid.addColumn("Id", Long.class);
grid.addColumn("Name", String.class);
grid.addColumn("Price", Integer.class);

```

使用`addColumn()`方法，我们向`Grid`添加新列。 方法的第二个参数是列的日期类型。

```java
Button loadButton = new Button("Load data");
loadButton.addClickListener(e -> {

    grid.getContainerDataSource().removeAllItems();

    List<Car> cars = ReadCars.read();

    for (Car car : cars) {

        grid.addRow(car.getId(), car.getName(), car.getPrice());
    }
});

```

加载按钮从数据库加载数据并将其插入`Grid`。 数据库工作委托给`ReadCars.read()`方法。 使用`addRow()`方法将新行添加到网格中。

```java
Button clearButton = new Button("Clear data");
clearButton.addClickListener(e -> {
    grid.getContainerDataSource().removeAllItems();
});

```

清除按钮将从`Grid`中删除所有数据。 `removeAllItems()`方法可以完成这项工作。

```java
vbox.addComponents(grid);
hbox.addComponents(loadButton, clearButton);

```

组件将添加到布局管理器。

`Car.java`

```java
package com.zetcode.bean;

public class Car {

    private Long id;
    private String name;
    private int price;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }
}

```

这是`Car` bean； 它包含`id`，`name`和`price`属性。

`ReadCars.java`

```java
package com.zetcode.service;

import com.zetcode.bean.Car;
import java.sql.SQLException;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.SimpleDriverDataSource;

public class ReadCars {

    public static List<Car> read()  {

        String url = "jdbc:mysql://localhost:3306/testdb?useSSL=true";

        SimpleDriverDataSource ds = new SimpleDriverDataSource();

        try {
            ds.setDriver(new com.mysql.jdbc.Driver());
        } catch (SQLException ex) {
            Logger.getLogger(ReadCars.class.getName()).log(Level.SEVERE, null, ex);
        }

        ds.setUsername("testuser");
        ds.setPassword("test623");
        ds.setUrl(url);

        String sql = "SELECT * FROM Cars";

        JdbcTemplate jdbcTemplate = new JdbcTemplate(ds);
        List<Car> cars = jdbcTemplate.query(sql, new BeanPropertyRowMapper(Car.class));

        return cars;
    }
}

```

`ReadCars`包含连接到 MySQL 数据库并从 Cars 表中检索所有汽车的代码。 我们使用 Spring 的 JdbcTemplate 来完成这项工作。

```java
String url = "jdbc:mysql://localhost:3306/testdb?useSSL=true";

```

这是 MySQL 数据库的连接 URL。 数据库名称为`testdb`。

```java
String sql = "SELECT * FROM Cars";

```

该 SQL 语句从 Cars 表中选择所有行。

```java
JdbcTemplate jdbcTemplate = new JdbcTemplate(ds);
List<Car> cars = jdbcTemplate.query(sql, new BeanPropertyRowMapper(Car.class));

```

在`BeanPropertyRowMapper`的帮助下，该工具自动将结果集列映射到`Car`类的属性，我们从 Cars 表中检索所有行并将其映射到`Car`对象的列表。

```java
return cars;

```

汽车列表将返回给呼叫者。

![Vaadin Grid](img/55afcdba2bb63a429b49f00ae25053aa.jpg)

Figure: Vaadin Grid

在本教程中，我们学习了 Vaadin Grid 组件的基础知识。 您可能也对相关教程感兴趣： [Vaadin TextArea 教程](/vaadin/textarea/)， [Vaadin ComboBox 教程](/vaadin/combobox/)， [Vaadin Slider 教程](/vaadin/slider/)， [Vaadin CheckBox 教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。