# 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` 在本教程中，我們學習了 Vaadin `Grid`組件的基礎知識。 您可能也對相關教程感興趣： [Vaadin `TextArea`教程](/vaadin/textarea/)， [Vaadin `ComboBox`教程](/vaadin/combobox/)， [Vaadin `Slider`教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。