# EasyUI datagrid
> 原文: [http://zetcode.com/articles/easyuidatagrid/](http://zetcode.com/articles/easyuidatagrid/)
在本教程中,我们将展示如何在 EasyUI datagrid 组件中显示来自 Derby 的数据库数据。 我们创建了一个简单的 Java Web 应用,该应用从 Derby 数据库中读取数据并将其发送到客户端浏览器。 数据显示在 datagrid 组件中。
## EasyUI
EasyUI 是一个 JavaScript 库,它提供了用于构建现代的,交互式 JavaScript 应用的基本功能。 EasyUI 为前端提供了许多有用的组件。 EasyUI 建立在 JQuery 之上。
Apache Derby 是完全用 Java 实现的开源关系数据库。 它占地面积小,易于部署和安装。 它支持嵌入式和客户端/服务器模式。 它也被称为 Java DB。
`cars.sql`
```java
CREATE TABLE CARS(ID INTEGER NOT NULL PRIMARY KEY GENERATED ALWAYS AS IDENTITY
(START WITH 1, INCREMENT BY 1), NAME VARCHAR(30), PRICE INT);
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);
```
在我们的示例中,我们使用此数据库表。
```java
javax
javaee-web-api
7.0
provided
org.apache.derby
derbyclient
10.12.1.1
com.googlecode.json-simple
json-simple
1.1.1
org.apache.derby
derbyoptionaltools
10.12.1.1
```
在项目中,我们使用这四个依赖项。 `javaee-web-api`是一组用于构建 Java Web 应用的 JAR,`derbyclient`是 Derby 数据库驱动程序,`json-simple`是用于 JSON 的库,`derbyoptionaltools`用于将 SQL 结果集转换为 JSON 。
`index.html`
```java
Cars
Cars
```
在`index.html`文件中,我们导入 EasyUI 和 JQuery 库。 我们使用 EasyUI 数据网格组件,该组件通过`class`属性设置。 `url`属性指向 Java Servlet,该 Java Servlet 以 JSON 格式返回数据。 行字段的名称必须与从 Servlet 返回的 JSON 数据的字段名称匹配。 JSON 是一种流行的轻量级数据交换格式。
`GetCars.java`
```java
package com.zetcode.web;
import com.zetcode.service.CarService;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
@WebServlet(name = "GetCars", urlPatterns = {"/GetCars"})
public class GetCars extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
JSONArray ar = CarService.getCarsJSON();
response.getWriter().write(ar.toJSONString());
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
```
`GetCars` Java servlet 调用服务方法,该方法从 Derby 数据库表中检索数据。
```java
response.setContentType("application/json");
```
我们将内容类型设置为`application/json`。
```java
JSONArray ar = CarService.getCarsJSON();
```
`getCarsJSON()`方法以 JSON 格式返回数据。
```java
response.getWriter().write(ar.toJSONString());
```
数据发送到客户端。
`CarService.java`
```java
package com.zetcode.service;
import com.zetcode.web.GetCars;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.apache.derby.optional.api.SimpleJsonUtils;
import org.json.simple.JSONArray;
public class CarService {
private static JSONArray jarray;
public static JSONArray getCarsJSON() {
Connection con = null;
PreparedStatement pst = null;
ResultSet rs = null;
String url = "jdbc:derby://localhost:1527/testdb";
String user = "app";
String password = "app";
try {
DriverManager.registerDriver(new org.apache.derby.jdbc.ClientDriver());
con = DriverManager.getConnection(url, user, password);
pst = con.prepareStatement("SELECT NAME, PRICE FROM Cars");
rs = pst.executeQuery();
jarray = SimpleJsonUtils.toJSON(rs);
} catch (SQLException ex) {
Logger lgr = Logger.getLogger(GetCars.class.getName());
lgr.log(Level.SEVERE, ex.getMessage(), ex);
} finally {
try {
if (rs != null) {
rs.close();
}
if (pst != null) {
pst.close();
}
if (con != null) {
con.close();
}
} catch (SQLException ex) {
Logger lgr = Logger.getLogger(GetCars.class.getName());
lgr.log(Level.WARNING, ex.getMessage(), ex);
}
}
return jarray;
}
}
```
`GetCars()`方法连接到 Derby 数据库并执行`SELECT`语句; 返回的数据将转换为 JSON。 JDBC 用于执行 SQL。
```java
pst = con.prepareStatement("SELECT NAME, PRICE FROM Cars");
```
我们从表中检索两列:名称和价格。
```java
jarray = SimpleJsonUtils.toJSON(rs);
```
我们使用`SimpleJsonUtils.toJSON()`方法将结果集转换为 JSON 对象数组。 该方法在 Derby 可选工具库中可用。
![Displaying database data in a datagrid](img/f13708222bd4c70e638d6a4a7dfe1b5c.jpg)
图:在数据网格中显示数据库数据
在本文中,我们展示了如何在数据网格控件中显示 Derby 数据库中的数据库数据。 数据已使用 JSON 格式从数据库发送到 datagrid。
您可能也对以下相关教程感兴趣:[数据表 JSON 服务器教程](/articles/datatablesjsonserver/), [Tomcat Derby 教程](/java/tomcatderby/), [Apache Derby 教程](/db/apachederbytutorial/),[使用 jsGrid 教程](/articles/jsgridservlet/), [jQuery 自动完成教程](/articles/jqueryautocomplete/),[在 EasyUI 数据网格中显示来自 Derby 的数据](/articles/easyuidatagrid/),[在 JSP 和 PHP 中使用 jQuery DatePicker](/articles/jquerydatepicker/) 和 [Java 教程](/lang/java/)。