使用 jsGrid 組件 · ZetCode 中文系列教程

# 使用 jsGrid 組件 > 原文： [http://zetcode.com/articles/jsgridservlet/](http://zetcode.com/articles/jsgridservlet/) 在本教程中，我們從 Derby 數據庫檢索數據并將其顯示在 jsGrid 組件中。數據以 JSON 格式從 Derby 發送到 jsGrid。作者的 Github [信息庫](https://github.com/janbodnar/jsGrid-Servlet)中提供了本教程的源代碼。 jsGrid 是基于 jQuery 的輕量級客戶端數據網格控件。它支持基本的網格操作，如插入，編輯，過濾，刪除，排序和分頁。 jsGrid 組件允許自定義其外觀和子組件。 jQuery 是一個快速，小型且功能豐富的 JavaScript 庫。通過易于使用的 API（可在多種瀏覽器中使用），它使 HTML 文檔的遍歷和操作，事件處理，動畫和 Ajax 變得更加簡單。 Apache Derby 是完全用 Java 實現的開源關系數據庫。 Derby 占用空間小，易于部署和安裝。它有兩種模式：嵌入式和客戶端/服務器。也稱為 Java DB。 JSON（JavaScript 對象表示法）是一種輕量級的數據交換格式。人類很容易讀寫，機器也很容易解析和生成。 JSON 的官方互聯網媒體類型為`application/json`。 JSON 文件擴展名是`.json`。在我們的應用中，我們將使用以下四種 HTTP 方法： * GET - 讀取資源 * POST - 創建新資源 * PUT — 修改資源 * DELETE — 刪除資源這些 HTTP 動詞將調用相應的 Java servlet 方法。 `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); ``` 在示例中，我們使用`CARS`數據庫表，該表位于 Derby `testdb`數據庫中。 ```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>com.google.guava</groupId> <artifactId>guava</artifactId> <version>19.0</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 數據。本項目使用`guava`的輔助方法。 `derbyoptionaltools`包含一個幫助程序方法，該方法將數據庫結果集轉換為 JSON 格式。 `index.html` ```java <!DOCTYPE html> <html> <head> <title>jsGrid example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> <link href="css/style.css" rel="stylesheet"> <link href="http://js-grid.com/css/jsgrid.min.css" rel="stylesheet"> <link href="http://js-grid.com/css/jsgrid-theme.min.css" rel="stylesheet"> </head> <body> <div id="jsGrid"></div> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://js-grid.com/js/jsgrid.min.js"></script> <script src="js/sample.js"></script> </body> </html> ``` 在`index.html`文件中，我們包含 jQuery 和 jsGrid 庫。 ```java <div id="jsGrid"></div> ``` jsGrid 作為`div`標簽包含在內。 `style.css` ```java html { height: 100%; } body { height: 100%; font-family: Verdana, Georgia; } ``` 為了顯示 jsGrid 組件的完整大小，我們需要設置`<body>`和`<html>`標簽的高度。 `sample.js` ```java $(function () { $.ajax({ type: "GET", url: "/JsGridEx/ManageCars" }).done(function () { $("#jsGrid").jsGrid({ height: "60%", width: "50%", inserting: true, editing: true, sorting: true, paging: true, autoload: true, pageSize: 10, controller: { loadData: function (filter) { return $.ajax({ type: "GET", url: "/JsGridEx/ManageCars", data: filter }); }, insertItem: function (item) { return $.ajax({ type: "POST", url: "/JsGridEx/ManageCars", data: item }); }, updateItem: function (item) { return $.ajax({ type: "PUT", url: "/JsGridEx/ManageCars", data: item }); }, deleteItem: function (item) { return $.ajax({ type: "DELETE", url: "/JsGridEx/ManageCars", data: item }); } }, fields: [ {name: "NAME", title: "Name", type: "text", width: 60}, {name: "PRICE", title: "Price", type: "text", width: 50}, {type: "control"} ] }); }); }); ``` 在`sample.js`文件中，我們創建并配置 jsGrid 組件。 ```java inserting: true, editing: true, sorting: true, paging: true, ``` 我們的 jsGrid 組件可以插入，編輯和排序數據，還支持分頁。 ```java loadData: function (filter) { return $.ajax({ type: "GET", url: "/JsGridEx/ManageCars", data: filter }); } ``` `loadData()`函數在`ManageCars` Servlet 上發出 HTTP GET 方法。 ```java insertItem: function (item) { return $.ajax({ type: "POST", url: "/JsGridEx/ManageCars", data: item }); } ``` 當我們插入新項目時，將在`ManageCars` Servlet 上發出 HTTP POST 方法。 ```java updateItem: function (item) { return $.ajax({ type: "PUT", url: "/JsGridEx/ManageCars", data: item }); } ``` 更新項目會在`ManageCars` Servlet 上生成 HTTP PUT 方法。 ```java deleteItem: function (item) { return $.ajax({ type: "DELETE", url: "/JsGridEx/ManageCars", data: item }); } ``` 刪除項目會在`ManageCars` Servlet 上生成 HTTP DELETE 方法。 ```java fields: [ {name: "NAME", title: "Name", type: "text", width: 60}, {name: "PRICE", title: "Price", type: "text", width: 50}, {type: "control"} ] ``` jsGrid 組件具有三個兩列：`NAME`和`PRICE`。它們必須與 JSON 中返回的鍵完全匹配。 `ManageCars.java` ```java package com.zetcode.web; import com.zetcode.service.CarService; import com.zetcode.util.Utils; import java.io.IOException; import java.util.Map; 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 = "ManageCars", urlPatterns = {"/ManageCars"}) public class ManageCars extends HttpServlet { @Override protected void doGet(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 doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException { String name = request.getParameter("NAME"); int price = Integer.valueOf(request.getParameter("PRICE")); CarService.insertCar(name, price); getServletContext().log("Car " + name + " inserted"); } @Override protected void doPut(HttpServletRequest request, HttpServletResponse response) throws ServletException { Map<String, String> dataMap = Utils.getParameterMap(request); String carName = dataMap.get("NAME"); int carPrice = Integer.valueOf(dataMap.get("PRICE")); CarService.updateCar(carName, carPrice); getServletContext().log("Car " + carName + " updated" + carPrice); } @Override protected void doDelete(HttpServletRequest request, HttpServletResponse response) throws ServletException { Map<String, String> dataMap = Utils.getParameterMap(request); String carName = dataMap.get("NAME"); CarService.deleteCar(carName); getServletContext().log("Car:" + carName + " deleted"); } } ``` `ManageCars`是 Java Servlet，其中包含 HTTP GET，POST，PUT 和 DELETE 方法的相應方法。 ```java @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); JSONArray ar = CarService.getCarsJSON(); response.getWriter().write(ar.toJSONString()); } ``` 響應于 HTTP GET 方法，調用`doGet()`方法。它調用`CarService`的`getCarsJSON()`方法，該方法從 CARS 表中返回所有汽車。數據以 JSON 格式發送回客戶端。 ```java @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException { String name = request.getParameter("NAME"); int price = Integer.valueOf(request.getParameter("PRICE")); CarService.insertCar(name, price); getServletContext().log("Car " + name + " inserted"); } ``` 在`doPost()`方法中，我們從請求中檢索`NAME`和`PRICE`參數，然后使用`CarService.insertCar()`方法將它們插入數據庫中。當我們收到一個 HTTP POST 方法時，`doPost()`方法被調用，期望添加新的資源。 ```java @Override protected void doPut(HttpServletRequest request, HttpServletResponse response) throws ServletException { Map<String, String> dataMap = Utils.getParameterMap(request); String carName = dataMap.get("NAME"); int carPrice = Integer.valueOf(dataMap.get("PRICE")); CarService.updateCar(carName, carPrice); getServletContext().log("Car " + carName + " updated" + carPrice); } ``` 在`doPut()`方法中，我們從請求中檢索`NAME`和`PRICE`參數，然后使用`CarService.updateCar()`方法將它們插入數據庫中。當我們接收到 HTTP PUT 方法時，會期望`doPut()`方法被調用，期望對資源進行修改。 ```java @Override protected void doDelete(HttpServletRequest request, HttpServletResponse response) throws ServletException { Map<String, String> dataMap = Utils.getParameterMap(request); String carName = dataMap.get("NAME"); CarService.deleteCar(carName); getServletContext().log("Car:" + carName + " deleted"); } ``` 在`doDelete()`方法中，我們從請求中檢索`NAME`參數，并使用`CarService.deleteCar()`方法刪除汽車。當我們收到一個 HTTP DELETE 方法，期望刪除資源時，將調用`doDelete()`方法。 `CarService.java` ```java package com.zetcode.service; import com.zetcode.util.Utils; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.logging.Level; import java.util.logging.Logger; import javax.sql.DataSource; import org.apache.derby.optional.api.SimpleJsonUtils; import org.json.simple.JSONArray; public class CarService { private static final Logger LOG = Logger.getLogger(CarService.class.getName()); private static JSONArray jarray; public static void updateCar(String name, int price) { Connection con = null; PreparedStatement pst = null; try { DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("UPDATE CARS SET NAME=?, PRICE=? WHERE NAME=?"); pst.setString(1, name); pst.setInt(2, price); pst.setString(3, name); pst.executeUpdate(); } catch (SQLException ex) { Logger lgr = Logger.getLogger(CarService.class.getName()); lgr.log(Level.SEVERE, ex.getMessage(), ex); } finally { try { if (pst != null) { pst.close(); } if (con != null) { con.close(); } } catch (SQLException ex) { LOG.log(Level.WARNING, ex.getMessage(), ex); } } } public static void deleteCar(String name) { Connection con = null; PreparedStatement pst = null; try { DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("DELETE FROM CARS WHERE Name=?"); pst.setString(1, name); pst.executeUpdate(); } catch (SQLException ex) { LOG.log(Level.SEVERE, ex.getMessage(), ex); } finally { try { if (pst != null) { pst.close(); } if (con != null) { con.close(); } } catch (SQLException ex) { LOG.log(Level.WARNING, ex.getMessage(), ex); } } } public static void insertCar(String name, int price) { Connection con = null; PreparedStatement pst = null; try { DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("INSERT INTO CARS(NAME, PRICE) " + "VALUES(?, ?)"); pst.setString(1, name); pst.setInt(2, price); pst.executeUpdate(); } catch (SQLException ex) { LOG.log(Level.SEVERE, ex.getMessage(), ex); } finally { try { if (pst != null) { pst.close(); } if (con != null) { con.close(); } } catch (SQLException ex) { LOG.log(Level.WARNING, ex.getMessage(), ex); } } } public static JSONArray getCarsJSON() { Connection con = null; PreparedStatement pst = null; ResultSet rs = null; try { DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("SELECT NAME, PRICE FROM Cars"); rs = pst.executeQuery(); jarray = SimpleJsonUtils.toJSON(rs); } catch (SQLException ex) { LOG.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) { LOG.log(Level.WARNING, ex.getMessage(), ex); } } return jarray; } } ``` `CarService`包含用于數據檢索和修改的方法。我們使用標準的 JDBC 代碼。 Java 數據庫連接（JDBC）是 Java 編程語言的應用編程接口（API），它定義了客戶端如何訪問數據庫。 ```java DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("DELETE FROM CARS WHERE Name=?"); pst.setString(1, name); pst.executeUpdate(); ``` 在這里，我們創建數據源并建立與 Derby 數據庫的新連接。我們執行`DELETE` SQL 語句。 ```java DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("INSERT INTO CARS(NAME, PRICE) " + "VALUES(?, ?)"); pst.setString(1, name); pst.setInt(2, price); pst.executeUpdate(); ``` 這是用于插入新車的 JDBC 代碼。 ```java DataSource ds = Utils.getDataSource(); con = ds.getConnection(); pst = con.prepareStatement("SELECT NAME, PRICE FROM Cars"); rs = pst.executeQuery(); jarray = SimpleJsonUtils.toJSON(rs); ``` 在`getCarsJSON()`方法中，我們得到一個結果集，并使用`SimpleJsonUtils.toJSON()`將其轉換為`JSONArray`。該方法是`derbyoptionaltools`的一部分。 `Utils.java` ```java package com.zetcode.util; import com.google.common.base.Splitter; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Map; import java.util.logging.Level; import java.util.logging.Logger; import javax.servlet.http.HttpServletRequest; import javax.sql.DataSource; import org.apache.derby.jdbc.ClientDataSource; public class Utils { public static DataSource getDataSource() { ClientDataSource ds = new ClientDataSource(); ds.setDatabaseName("testdb"); ds.setUser("app"); ds.setPassword("app"); ds.setServerName("localhost"); ds.setPortNumber(1527); return ds; } public static Map<String, String> getParameterMap(HttpServletRequest request) { BufferedReader br = null; Map<String, String> dataMap = null; try { InputStreamReader reader = new InputStreamReader( request.getInputStream()); br = new BufferedReader(reader); String data = br.readLine(); dataMap = Splitter.on('&') .trimResults() .withKeyValueSeparator( Splitter.on('=') .limit(2) .trimResults()) .split(data); return dataMap; } catch (IOException ex) { Logger.getLogger(Utils.class.getName()).log(Level.SEVERE, null, ex); } finally { if (br != null) { try { br.close(); } catch (IOException ex) { Logger.getLogger(Utils.class.getName()).log(Level.WARNING, null, ex); } } } return dataMap; } } ``` `Utils`是一個幫助程序類，它包含兩個方法：`getDataSource()`和`getParameterMap()`。 ```java public static DataSource getDataSource() { ClientDataSource ds = new ClientDataSource(); ds.setDatabaseName("testdb"); ds.setUser("app"); ds.setPassword("app"); ds.setServerName("localhost"); ds.setPortNumber(1527); return ds; } ``` `getDataSource()`創建并返回一個 Derby 數據源。 ```java InputStreamReader reader = new InputStreamReader( request.getInputStream()); br = new BufferedReader(reader); String data = br.readLine(); dataMap = Splitter.on('&') .trimResults() .withKeyValueSeparator( Splitter.on('=') .limit(2) .trimResults()) .split(data); return dataMap; ``` 與`doGet()`和`doPost()`方法不同，`doPut()`和`doDelete()`無法使用`getParameter()`方法檢索請求參數。我們必須從流中獲取它們。為此，我們使用番石榴的`Splitter`類。解析參數并在映射中返回。 ![jsGrid component](https://img.kancloud.cn/07/9c/079c193ea7a12ccdc2e9bcaeeada4a0e_573x484.jpg) 圖：jsGrid 組件在本教程中，我們使用了 jsGrid 組件。我們已使用從 Derby 數據庫檢索的數據填充了該組件。數據以 JSON 格式從數據庫發送。您可能也對以下相關教程感興趣： [Java 教程](/lang/java/)， [jQuery DatePicker 教程](/articles/jquerydatepicker/)， [Datatables JSON 服務器教程](/articles/datatablesjsonserver/)， [Apache Derby 教程](/db/apachederbytutorial/) 。