EasyUI datagrid · ZetCode 中文系列教程

# 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 <dependencies> <dependency> <groupId>javax</groupId> <artifactId>javaee-web-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.derby</groupId> <artifactId>derbyclient</artifactId> <version>10.12.1.1</version> </dependency> <dependency> <groupId>com.googlecode.json-simple</groupId> <artifactId>json-simple</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>org.apache.derby</groupId> <artifactId>derbyoptionaltools</artifactId> <version>10.12.1.1</version> </dependency> </dependencies> ``` 在項目中，我們使用這四個依賴項。 `javaee-web-api`是一組用于構建 Java Web 應用的 JAR，`derbyclient`是 Derby 數據庫驅動程序，`json-simple`是用于 JSON 的庫，`derbyoptionaltools`用于將 SQL 結果集轉換為 JSON 。 `index.html` ```java <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Cars</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <h2>Cars</h2> <table id="dg" title="Cars" class="easyui-datagrid" style="width:700px;height:350px" url="GetCars" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="NAME" width="50">Name</th> <th field="PRICE" width="50">Price</th> </tr> </thead> </table> </body> </html> ``` 在`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](https://img.kancloud.cn/e5/2e/e52e53222c521f0f180dc972c24cd006_724x529.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/)。