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.propertiesjdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.0.110:3306/demosite
jdbc.username=steven
jdbc.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;

@Repository
public 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 = "/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 取得資料直接顯示於當前的網頁，所以不會有傳統網頁還要翻到新一頁才能顯示資料的問題。

时间： 2024-10-10 22:00:58

struts2 jQuery tag (2)的相关文章

struts2 jQuery tag (1)

最近又重拾 web 程式,才讓我發現,原來 struts 又進化了! 提供了不少 jQuery tag,可以很方便的做出漂亮的操作介面! 說明如下: 官網: https://code.google.com/p/struts2-jquery/ 其實上面就有很多 sample 程式,下載來看就懂了,我這個 po 文算是給自己做個筆記吧! 這個程式只是簡單的有兩個功能,第一個是可以選擇日期,並顯示出來,第二個功能是查詢某一天的股價,在下一篇再說明,這裡先看一下第一個功能執行出來的畫面. 先在 ecli

struts2 自定义tag标签

在项目中可能有很多相同的jsp页面表示功能,这时可以使用自定义的tag进行定义,渐少重复的工作量便于日后维护! 下面就基于struts2进行自定义标签的定义与实现: 首先:自定义类MyTag继承struts2的Component package cookielogin; import java.io.IOException; import java.io.Writer; import org.apache.struts2.components.Component; import com.open

struts2+jquery 实现ajax登陆

一.新建一个web项目:test,配置好struts2的环境(详细配置见:http://www.cnblogs.com/wuweidu/p/3841297.html)       导入Jquery的js文件到项目 二.在com.action包下,新建一个loginAction.java loginAction.java的代码如下 package com.action; import org.apache.struts2.convention.annotation.Action; import o

struts2 官方系列教程三：使用struts2 标签 tag

避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本教材假定你已完成了HelloWorld项目,你可以在 struts2 官方系列教程三:使用struts2 标签 tag 下载本章节的代码 在上一节教程中,我们在index.jsp中使用 url tag 创建了一个超链接hello.action 这节我们将探索struts2中其它tags Web应用程

Struts2+Jquery文件上传

简单的文件上传满足不了需求,我需要做一个异步上传的功能,先写个简单的例子. Struts2 + Jquery 准备工作:struts2所需jar包,struts2的Json支持,jquery.js ajaxfileupload.js 1:pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

jquery tag页签切换

? $(document).ready(function () {     var tag=$(".tags");     tag.mouseover(function(){         $(this).addClass("tagOn").siblings().removeClass("tagOn");         var index =  tag.index(this);         $("#tagsBody")

struts2+jquery+json集成

以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步骤: 1.新建一个web工程,导入struts2+jquery+json所需jar,如下图 目录结构图 2.创建实体类User package com.ljq.bean; import java.io.Serializable; @SuppressWarnings("serial") pu

Struts2+JQuery+JSON实现异步交互

Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值.对象.List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定. 第一步:在MyEclipse中创建JavaWeb工厂并把Struts2 和 json的jar包添加到工程中添加完成后的工程图是: 第二步:创建后台: 1. UserInfo实体类: Userinfo实体类代码: package struts2jsonjquery.test.entity; im

struts2 + jquery + json 简单的前后台信息交互

ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信息传递. 1 . 首先创建一个 静态页面 ,然后在 脚本中 写一个 ajax 方法如下: $.ajax({ type : "get" , url : "ajax/ajax?time="+Math.random() , datatype : "json"