# 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
mysql
mysql-connector-java
5.1.42
org.springframework
spring-jdbc
4.3.9.RELEASE
```
我们向 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 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 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 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 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 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/)。