首页 > 代码库 > struts2 jQuery tag (2)

struts2 jQuery tag (2)

繼續上一篇關於 struts 2 jQuery tag 的介紹,這裡要 demo 一個很有用的 tag --- grid ! 如下圖是執行出來的結果。

struts jQuery tag 提供的 grid 功能非常強大,可以排序、翻頁、編輯,這些進階的功能留給鄉民們自行研究,這裡只簡單的從資料庫撈出選定日期的資料,顯示在 grid 上。struts.xml 及 index.jsp 的內容沒有改變,請看上一篇的內容。其餘說明如下:

  • 專案結構: 所有檔案的列表,因為這裡的股票資料是存在資料庫,整合了 spring 和 mybatis,所以多了一些 DAO、DTO 及 spring 設定檔。

  • 因為要整合 spring 和 mybatis,並且引入新的 grid tag 的標籤庫,所以 pom.xml 修改如下:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>DemoSite</groupId>  <artifactId>DemoSite</artifactId>  <version>0.0.1-SNAPSHOT</version>  <packaging>war</packaging>  <build>    <sourceDirectory>src</sourceDirectory>    <plugins>      <plugin>        <artifactId>maven-compiler-plugin</artifactId>        <version>3.1</version>        <configuration>          <source>1.7</source>          <target>1.7</target>        </configuration>      </plugin>      <plugin>        <artifactId>maven-war-plugin</artifactId>        <version>2.3</version>        <configuration>          <warSourceDirectory>WebContent</warSourceDirectory>          <failOnMissingWebXml>false</failOnMissingWebXml>        </configuration>      </plugin>    </plugins>  </build>  <dependencies>      <dependency>          <groupId>org.springframework</groupId>          <artifactId>spring-context</artifactId>          <version>4.1.0.RELEASE</version>      </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-web</artifactId>        <version>4.1.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-jdbc</artifactId>        <version>4.1.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-tx</artifactId>        <version>4.1.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-test</artifactId>        <version>4.1.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.apache.struts</groupId>        <artifactId>struts2-core</artifactId>        <version>2.3.16.3</version>    </dependency>    <dependency>        <groupId>org.apache.struts</groupId>        <artifactId>struts2-spring-plugin</artifactId>        <version>2.3.16.3</version>    </dependency>    <dependency>        <groupId>org.apache.struts</groupId>        <artifactId>struts2-convention-plugin</artifactId>        <version>2.3.16.3</version>    </dependency>    <dependency>        <groupId>org.apache.struts</groupId>        <artifactId>struts2-json-plugin</artifactId>        <version>2.3.16.3</version>    </dependency>    <dependency>        <groupId>org.apache.struts</groupId>        <artifactId>struts2-junit-plugin</artifactId>        <version>2.3.16.3</version>    </dependency>    <dependency>        <groupId>com.jgeppert.struts2.jquery</groupId>        <artifactId>struts2-jquery-plugin</artifactId>        <version>3.7.1</version>    </dependency>    <dependency>        <groupId>com.jgeppert.struts2.jquery</groupId>        <artifactId>struts2-jquery-grid-plugin</artifactId>        <version>3.7.1</version>    </dependency>    <dependency>        <groupId>org.mybatis</groupId>        <artifactId>mybatis</artifactId>        <version>3.2.7</version>    </dependency>    <dependency>        <groupId>org.mybatis</groupId>        <artifactId>mybatis-spring</artifactId>        <version>1.2.2</version>    </dependency>    <dependency>        <groupId>mysql</groupId>        <artifactId>mysql-connector-java</artifactId>        <version>5.1.33</version>    </dependency>    <dependency>        <groupId>ch.qos.logback</groupId>        <artifactId>logback-classic</artifactId>        <version>1.1.2</version>    </dependency>  </dependencies></project>
  • 修改 web.xml,整合 spring,內容如下:
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">    <display-name>struts2</display-name>    <context-param>        <param-name>contextConfigLocation</param-name>        <param-value>classpath*:beans-config.xml</param-value>    </context-param>        <listener>        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>    </listener>        <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>    </filter>        <filter-mapping>        <filter-name>struts2</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>          <welcome-file-list>        <welcome-file>index.jsp</welcome-file>    </welcome-file-list>  </web-app>
  • spring 設定檔: 這裡只是用 spring 整合 mybatis,以讀取資料庫,所有 DAO 會放在 idv.steven.demo.dao 這個 package 裡。datasource.properties 裡則有 JDBC 相關參數。
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:c="http://www.springframework.org/schema/c"    xmlns:cache="http://www.springframework.org/schema/cache"    xmlns:context="http://www.springframework.org/schema/context"    xmlns:jdbc="http://www.springframework.org/schema/jdbc"    xmlns:jee="http://www.springframework.org/schema/jee"    xmlns:lang="http://www.springframework.org/schema/lang"    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"    xmlns:p="http://www.springframework.org/schema/p"    xmlns:tx="http://www.springframework.org/schema/tx"    xmlns:util="http://www.springframework.org/schema/util"    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd        http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache.xsd        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd        http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.1.xsd        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee.xsd        http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang.xsd        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd">    <context:property-placeholder location="classpath:datasource.properties" />    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"        p:driverClassName="${jdbc.driverClassName}"        p:url="${jdbc.url}"        p:username="${jdbc.username}"        p:password="${jdbc.password}"    />         <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"        p:dataSource-ref="dataSource"    />        <tx:annotation-driven transaction-manager="transactionManager" />    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">      <property name="dataSource" ref="dataSource" />      <property name="transactionFactory">        <bean class="org.apache.ibatis.transaction.managed.ManagedTransactionFactory" />      </property>      <property name="mapperLocations">          <list>              <value>classpath*:idv/steven/demo/dao/StockDao.xml</value>          </list>      </property>    </bean>         <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"        p:sqlSessionFactoryBeanName="sqlSessionFactory"        p:basePackage="idv.steven.demo.dao"    />  </beans>
# datasource.properties
jdbc.driverClassName=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql://192.168.0.110:3306/demositejdbc.username=stevenjdbc.password=password
  • DTO 的定義如下,是用來將資料庫裡的資料傳回給程式,因為 table Stock 有六個欄位,且我們這六個欄位的值都想要,就定義了相同的名稱的六個變數,並給予 getter、setter method。
package idv.steven.demo.dto;import java.sql.Date;public class Stock implements Comparable<Stock> {    private String iD;    private String name;    private Double fluctuation;    private Integer amount;    private Double price;    private Date txDate;        public String getID() {        return iD;    }    public void setID(String iD) {        this.iD = iD;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public Double getFluctuation() {        return fluctuation;    }    public void setFluctuation(Double fluctuation) {        this.fluctuation = fluctuation;    }    public Integer getAmount() {        return amount;    }    public void setAmount(Integer amount) {        this.amount = amount;    }    public Double getPrice() {        return price;    }    public void setPrice(Double price) {        this.price = price;    }        public Date getTxDate() {        return txDate;    }    public void setTxDate(Date txDate) {        this.txDate = txDate;    }        @Override    public String toString() {        return "Stock [iD=" + iD + ", name=" + name + ", fluctuation="                + fluctuation + ", amount=" + amount + ", price=" + price                + ", txDate=" + txDate + "]";    }        @Override    public int compareTo(Stock o) {        return this.iD.compareTo(o.getID());    }}
  • DAO 的程式如下,其實我們只會用到 find method,createStock method 可以先忽略。find method 接收一個參數 -- 交易日期,並將當天的股票資料傳回,注意 @Repository 這個標註,這表示這個類別是一個 DAO。
package idv.steven.demo.dao;import idv.steven.demo.dto.Stock;import java.util.List;import org.apache.ibatis.annotations.Param;import org.springframework.stereotype.Repository;@Repositorypublic interface StockDao {    public List<Stock> find(@Param("txDate") String txDate);    public int createStock(Stock stock);}
  • mybatis 的 O/R mapping 如下,很簡單的一個 select statement。
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  <mapper namespace="idv.steven.demo.dao.StockDao">       <sql id="fields">iD, name, fluctuation, amount, price, txDate</sql>         <resultMap type="idv.steven.demo.dto.Stock" id="stock">        <id column="iD" property="iD"/>        <result column="name" property="name"/>        <result column="fluctuation" property="fluctuation"/>        <result column="amount" property="amount"/>        <result column="price" property="price"/>        <result column="txDate" property="txDate"/>    </resultMap>    <select id="find" parameterType="String" resultMap="stock">          select <include refid="fields"/>        from Stock        where txDate = #{txDate}    </select>        <insert id="createStock">          insert into Stock (<include refid="fields"/>)          values (#{iD}, #{name}, #{fluctuation}, #{amount}, #{price}, #{txDate})    </insert></mapper>
  • stock.jsp: 從 index.jsp 點選「股價」的 tab 後,觸發 action 後轉進入這個畫面,這個畫面有三個元件,一個「日曆」、一個「按鈕」及一個「div」。這裡要注意的是 submit 這個 tag 的 targets attribute,它指出了結果會顯示的位置。按 submit 後會觸發的 action 是寫在 href 裡。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="sj" uri="/struts-jquery-tags"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>股價</title>    <sj:head jqueryui="true"/></head><body><s:url var="remoteurl" action="showStock" /><s:form id="formStock" theme="xhtml">    <sj:datepicker id="txDate" name="txDate" label="請選擇日期" displayFormat="yy/mm/dd" />    <sj:submit         href="%{remoteurl}"        targets="stockPrice"         value="送出"         indicator="indicator"        button="true"    />    </s:form><sj:div id="stockPrice" /></body></html>
  • Acton: 上面的畫面按 submit 後觸發了下面橘色的 method,這個 method 沒做什麼事,只是通知結果要顯示在 /jsp/showStock.jsp 這個網頁,至於結果是什麼? 那要看 showStock.jsp 才知道。
package idv.steven.demo.action;import java.util.List;import idv.steven.demo.dao.StockDao;import idv.steven.demo.dto.Stock;import org.apache.struts2.convention.annotation.Action;import org.apache.struts2.convention.annotation.Result;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import com.opensymphony.xwork2.ActionSupport;public class StockAction extends ActionSupport {    private static final long serialVersionUID = 4242093494226883485L;    final static Logger logger = LoggerFactory.getLogger(StockAction.class);        @Autowired    private StockDao dao;        private String txDate;    private List<Stock> stocks;        //action method    @Action(value = "http://www.mamicode.com/stock", results = { @Result(location = "/jsp/stock.jsp", name = "success") })    public String stock() throws Exception {        return SUCCESS;    }    @Action(value = "/showStock", results = { @Result(location = "/jsp/showStock.jsp", name = "success") })    public String showStock() {        return SUCCESS;    }        @Action(value = "/stockList", results = { @Result(name = "success", type = "json") })    public String stockList() {        stocks = dao.find(txDate);                return SUCCESS;    }        //getter & setter method    public String getTxDate() {        return txDate;    }    public void setTxDate(String txDate) {        this.txDate = txDate;    }    public List<Stock> getStocks() {        return stocks;    }    public void setStocks(List<Stock> stocks) {        this.stocks = stocks;    }}
  • 股票列表的網頁如下,就只有一個 grid 裡顯示著股票資訊,因為 grid 是在 struts-query-grid-tags 標籤庫裡,所以綠色部份將這個標籤庫引入。至於 grid 的資料來源在那呢? 要看橘色部份,這裡指出要到 stockList action 去取得資料,淺藍色則是指出取得的資料將以什麼怎樣的資料型別傳回,這裡指定為 json,gridModel 這個設定則是資料傳回時的物件名稱,這裡設為 stocks,即表示在 action 那邊應該會有一個 getStocks() 的 method 可供 grid 取得資料。要特別注意的是灰色那一行,它指出了這個 grid 是屬於那一個 form,這樣我們才抓的到 form 裡面的交易日期。

 現在回頭去看上面的 action -- StockAction.java,裡面標有 @Action("stockList") 的 method,grid 從這取得資料,程式很簡單的呼叫 DAO 取得資料放到 stocks 變數裡即返回 grid,而 grid 這時即可透過 getStocks() method 取得相關資料並顯示出來了! 注意看那個 method 上也有標注傳回的資料型別為 json,action 和 grid 間才能正確溝通。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="sj" uri="/struts-jquery-tags"%><%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%><s:url var="remoteurl1" action="stockList" />    <sjg:grid        id="gridtable"        caption="股價"        dataType="json"        href="/stockList"        pager="true"        gridModel="stocks"        rowList="10,15,20"        formIds="formStock"        rowNum="15"        rownumbers="true"        viewrecords="true"        shrinkToFit="true"    >        <sjg:gridColumn name="txDate" index="txDate" title="交易日期" sortable="false"/>        <sjg:gridColumn name="ID" index="ID" title="代號" sortable="false"/>        <sjg:gridColumn name="name" index="name" title="名稱" sortable="true"/>        <sjg:gridColumn name="fluctuation" index="fluctuation" title="漲跌" sortable="false"/>        <sjg:gridColumn name="amount" index="amount" title="交易量" sortable="true"/>        <sjg:gridColumn name="price" index="price" title="成交價" sortable="true"/>    </sjg:grid>

最後執行出來的,就如一開頭的畫面所示,非常的簡單,而且正如 struts2 jQuery tag 這個名稱所示的,因為是用 jQuery 透過 ajax 取得資料直接顯示於當前的網頁,所以不會有傳統網頁還要翻到新一頁才能顯示資料的問題。

 

struts2 jQuery tag (2)