SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子

转载自http://z18022893621.iteye.com/blog/1961412

一、建Web Project,导入SSH2框架

 

二、在WebRoot下建给文件夹script,里面放入如下文件:

1.themes(可以给ui换主题)

2.jquery-1.8.0.min.js(可能会报错,不用管)

3.jquery.easyui.min.js

4.easyui-lang-zh_CN.js(国际化文件)

5.book.js(脚本)

 

三、entity和entity的映射文件

Book:

Java代码  
  1. package org.ajax.entity;  
  2.   
  3. import java.sql.Timestamp;  
  4.   
  5.   
  6. /** 
  7.  * Book entity. @author MyEclipse Persistence Tools 
  8.  */  
  9.   
  10. public class Book  implements java.io.Serializable {  
  11.   
  12.   
  13.     // Fields      
  14.   
  15.      private Integer id;  
  16.      private String isbn;  
  17.      private String title;  
  18.      private Double price;  
  19.      private Timestamp pubdate;  
  20.      private String intro;  
  21.   
  22.   
  23.     // Constructors  
  24.   
  25.     /** default constructor */  
  26.     public Book() {  
  27.     }  
  28.   
  29.     /** minimal constructor */  
  30.     public Book(Double price, Timestamp pubdate) {  
  31.         this.price = price;  
  32.         this.pubdate = pubdate;  
  33.     }  
  34.       
  35.     /** full constructor */  
  36.     public Book(String isbn, String title, Double price, Timestamp pubdate, String intro) {  
  37.         this.isbn = isbn;  
  38.         this.title = title;  
  39.         this.price = price;  
  40.         this.pubdate = pubdate;  
  41.         this.intro = intro;  
  42.     }  
  43.   
  44.      
  45.     // Property accessors  
  46.   
  47.     public Integer getId() {  
  48.         return this.id;  
  49.     }  
  50.       
  51.     public void setId(Integer id) {  
  52.         this.id = id;  
  53.     }  
  54.   
  55.     public String getIsbn() {  
  56.         return this.isbn;  
  57.     }  
  58.       
  59.     public void setIsbn(String isbn) {  
  60.         this.isbn = isbn;  
  61.     }  
  62.   
  63.     public String getTitle() {  
  64.         return this.title;  
  65.     }  
  66.       
  67.     public void setTitle(String title) {  
  68.         this.title = title;  
  69.     }  
  70.   
  71.     public Double getPrice() {  
  72.         return this.price;  
  73.     }  
  74.       
  75.     public void setPrice(Double price) {  
  76.         this.price = price;  
  77.     }  
  78.   
  79.     public Timestamp getPubdate() {  
  80.         return this.pubdate;  
  81.     }  
  82.       
  83.     public void setPubdate(Timestamp pubdate) {  
  84.         this.pubdate = pubdate;  
  85.     }  
  86.   
  87.     public String getIntro() {  
  88.         return this.intro;  
  89.     }  
  90.       
  91.     public void setIntro(String intro) {  
  92.         this.intro = intro;  
  93.     }  
  94.   
  95. }  

 

Book.hbm.xml:

Java代码  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"  
  3. "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">  
  4. <!--   
  5.     Mapping file autogenerated by MyEclipse Persistence Tools  
  6. -->  
  7. <hibernate-mapping>  
  8.     <class name="org.ajax.entity.Book" table="BOOK" schema="y2">  
  9.         <id name="id" type="java.lang.Integer">  
  10.             <column name="ID" length="200" />  
  11.             <generator class="sequence">  
  12.                 <param name="sequence">book_seq</param>  
  13.             </generator>  
  14.         </id>  
  15.         <property name="isbn" type="java.lang.String">  
  16.             <column name="ISBN" length="100" />  
  17.         </property>  
  18.         <property name="title" type="java.lang.String">  
  19.             <column name="TITLE" length="2048" />  
  20.         </property>  
  21.         <property name="price" type="java.lang.Double">  
  22.             <column name="PRICE" precision="126" scale="0" not-null="true" />  
  23.         </property>  
  24.         <property name="pubdate" type="java.sql.Timestamp">  
  25.             <column name="PUBDATE" length="11" not-null="true" />  
  26.         </property>  
  27.         <property name="intro" type="java.lang.String">  
  28.             <column name="INTRO" length="4000" />  
  29.         </property>  
  30.     </class>  
  31. </hibernate-mapping>  

 

 

四、dao和daoImpl

Java代码  
  1. package org.ajax.dao;  
  2.   
  3. import java.util.List;  
  4. import org.ajax.entity.Book;  
  5.   
  6. /** 
  7.  * 接口 
  8.  *  
  9.  * @author miao 
  10.  *  
  11.  */  
  12. public interface BookDao {  
  13.   
  14.     /** 
  15.      * 查询所有书籍 
  16.      *  
  17.      * @return 
  18.      */  
  19.     public List<Book> find();  
  20.   
  21.     /** 
  22.      * 添加书籍 
  23.      *  
  24.      * @param book 
  25.      * @return 
  26.      */  
  27.     public int add(Book book);  
  28.   
  29.     /** 
  30.      * 删除书籍 
  31.      *  
  32.      * @param id 
  33.      * @return 
  34.      */  
  35.     public int delete(int id);  
  36.   
  37.     /** 
  38.      * 获得一书籍记录 
  39.      *  
  40.      * @param id 
  41.      * @return 
  42.      */  
  43.     public Book findById(int id);  
  44.   
  45.     /** 
  46.      * 更新书籍 
  47.      *  
  48.      * @param book 
  49.      * @return 
  50.      */  
  51.     public int update(Book book);  
  52.   
  53.     /** 
  54.      * 统计书籍共多少本 
  55.      *  
  56.      * @return 
  57.      */  
  58.     public long findTotal();  
  59.   
  60.     /** 
  61.      * 查询一页的数据 
  62.      *  
  63.      * @param begin 从哪条开始0 
  64.      * @param end 得到多少条 
  65.      * @param sort 排序字段 
  66.      * @param order 升序或降序 desc/asc 
  67.      */  
  68.     public List<Book> findPageBooks(int begin, int end, String sort, String order);  
  69.   
  70. }  

 

Java代码  
  1. package org.ajax.dao.impl;  
  2.   
  3. import java.sql.SQLException;  
  4. import java.util.List;  
  5. import org.ajax.dao.BookDao;  
  6. import org.ajax.entity.Book;  
  7. import org.hibernate.Criteria;  
  8. import org.hibernate.HibernateException;  
  9. import org.hibernate.Session;  
  10. import org.hibernate.criterion.DetachedCriteria;  
  11. import org.hibernate.criterion.Order;  
  12. import org.springframework.orm.hibernate3.HibernateCallback;  
  13. import org.springframework.orm.hibernate3.support.HibernateDaoSupport;  
  14.   
  15. /** 
  16.  * 接口实现类 
  17.  *  
  18.  * @author miao 
  19.  *  
  20.  */  
  21. public class BookDaoImpl extends HibernateDaoSupport implements BookDao {  
  22.   
  23.     @SuppressWarnings("unchecked")  
  24.     public List<Book> find() {  
  25.         DetachedCriteria criteria = DetachedCriteria.forClass(Book.class);  
  26.         criteria.addOrder(Order.desc("pubdate"));  
  27.         return super.getHibernateTemplate().findByCriteria(criteria);  
  28.     }  
  29.   
  30.     public int add(Book book) {  
  31.         return (Integer) super.getHibernateTemplate().save(book);  
  32.     }  
  33.   
  34.     public int delete(int id) {  
  35.         return super.getHibernateTemplate().bulkUpdate("delete from Book b where b.id=?", id);  
  36.     }  
  37.   
  38.     public Book findById(int id) {  
  39.         return (Book) super.getHibernateTemplate().get(Book.class, id);  
  40.     }  
  41.   
  42.     public int update(Book book) {  
  43.         return super.getHibernateTemplate().bulkUpdate(  
  44.                 "update Book b set b.isbn = ?, b.title = ?, b.price = ?,"  
  45.                         + "b.pubdate = ?, b.intro = ? where b.id = ?",  
  46.                 new Object[] { book.getIsbn(), book.getTitle(), book.getPrice(), book.getPubdate(),  
  47.                         book.getIntro(), book.getId() });  
  48.     }  
  49.   
  50.     public long findTotal() {  
  51.         return (Long) super.getHibernateTemplate().execute(new HibernateCallback() {  
  52.             public Object doInHibernate(Session session) throws HibernateException, SQLException {  
  53.                 return (Long) session.createQuery("select count(*) from Book").uniqueResult();  
  54.             }  
  55.         });  
  56.     }  
  57.   
  58.     /** 
  59.      * 查询一页的数据 
  60.      *  
  61.      * @param begin 从哪条开始0 
  62.      * @param end 得到多少条 
  63.      * @param sort 排序字段 
  64.      * @param order 升序或降序 desc/asc 
  65.      */  
  66.     @SuppressWarnings("unchecked")  
  67.     public List<Book> findPageBooks(final int begin, final int end, final String sort,  
  68.             final String order) {  
  69.         // 当要用到原生的Hibernate的Session的时候,这种最灵活,可以使用Query和Criteria,不用着急管理会话和事  
  70.         return super.getHibernateTemplate().executeFind(new HibernateCallback() {  
  71.             public Object doInHibernate(Session session) throws HibernateException, SQLException {  
  72.                 Criteria criteria = session.createCriteria(Book.class);  
  73.                 if ("desc".equals(order)) {  
  74.                     criteria.addOrder(Order.desc(sort));  
  75.                 } else {  
  76.                     criteria.addOrder(Order.asc(sort));  
  77.                 }  
  78.                 criteria.setFirstResult(begin).setMaxResults(end);  
  79.                 return criteria.list();  
  80.             }  
  81.         });  
  82.     }  
  83.   
  84. }  

 

 

五、biz和bizImpl

Java代码  
  1. package org.ajax.biz;  
  2.   
  3. import java.util.List;  
  4.   
  5. import org.ajax.entity.Book;  
  6.   
  7. /** 
  8.  * 业务类 
  9.  *  
  10.  * @author miao 
  11.  *  
  12.  */  
  13. public interface BookBiz {  
  14.   
  15.     /** 
  16.      * 查询所有书籍 
  17.      *  
  18.      * @return 
  19.      */  
  20.     public List<Book> findAllBooks();  
  21.   
  22.     /** 
  23.      * 添加书籍 
  24.      *  
  25.      * @param book 
  26.      * @return 
  27.      */  
  28.     public int addBook(Book book);  
  29.   
  30.     /** 
  31.      * 删除书籍 
  32.      *  
  33.      * @param id 
  34.      * @return 
  35.      */  
  36.     public int deleteBook(int id);  
  37.   
  38.     /** 
  39.      * 获得一书籍记录 
  40.      *  
  41.      * @param id 
  42.      * @return 
  43.      */  
  44.     public Book findBook(int id);  
  45.   
  46.     /** 
  47.      * 更新书籍 
  48.      *  
  49.      * @param book 
  50.      * @return 
  51.      */  
  52.     public int updateBook(Book book);  
  53.   
  54.     /** 
  55.      * 统计书籍共多少本 
  56.      *  
  57.      * @return 
  58.      */  
  59.     public long findTotal();  
  60.   
  61.     /** 
  62.      * 查询一页的数据 
  63.      *  
  64.      * @param page 当前页号 
  65.      * @param size 页面大小 
  66.      * @param sort 排序字段 
  67.      * @param order 升序或降序 desc/asc 
  68.      */  
  69.     public List<Book> findPageBooks(int page, int size, String sort, String order);  
  70.   
  71. }  

 

Java代码  
  1. package org.ajax.biz.impl;  
  2.   
  3. import java.util.List;  
  4. import org.ajax.biz.BookBiz;  
  5. import org.ajax.dao.BookDao;  
  6. import org.ajax.entity.Book;  
  7.   
  8. /** 
  9.  * 业务实现类 
  10.  *  
  11.  * @author miao 
  12.  *  
  13.  */  
  14. public class BookBizImpl implements BookBiz {  
  15.   
  16.     private BookDao bookDao;  
  17.   
  18.     public void setBookDao(BookDao bookDao) {  
  19.         this.bookDao = bookDao;  
  20.     }  
  21.   
  22.     public List<Book> findAllBooks() {  
  23.         return bookDao.find();  
  24.     }  
  25.   
  26.     public int addBook(Book book) {  
  27.         return bookDao.add(book);  
  28.     }  
  29.   
  30.     public int deleteBook(int id) {  
  31.         return bookDao.delete(id);  
  32.     }  
  33.   
  34.     public Book findBook(int id) {  
  35.         return bookDao.findById(id);  
  36.     }  
  37.   
  38.     public int updateBook(Book book) {  
  39.         return bookDao.update(book);  
  40.     }  
  41.   
  42.     public long findTotal() {  
  43.         return bookDao.findTotal();  
  44.     }  
  45.   
  46.     /** 
  47.      * 查询一页的数据 
  48.      *  
  49.      * @param page 当前页号 
  50.      * @param size 页面大小 
  51.      * @param sort 排序字段 
  52.      * @param order 升序或降序 desc/asc 
  53.      */  
  54.     public List<Book> findPageBooks(int page, int size, String sort, String order) {  
  55.         int begin = (page - 1) * size;  
  56.         return bookDao.findPageBooks(begin, size, sort, order);  
  57.     }  
  58.   
  59. }  

 

 

六、action

Java代码  
  1. package org.ajax.action;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5. import org.ajax.biz.BookBiz;  
  6. import org.ajax.entity.Book;  
  7. import com.opensymphony.xwork2.ActionSupport;  
  8. /** 
  9.  * Action 
  10.  * @author miao 
  11.  * 
  12.  */  
  13. public class BookAction extends ActionSupport {  
  14.   
  15.     // 调用业务类  
  16.     private BookBiz bookBiz;  
  17.   
  18.     private Book book; // 一本书  
  19.     private int page;// 当前第几页  
  20.     private Map<String, Object> data = new HashMap<String, Object>();// 封装数据  
  21.     private int size;// 页面大小,页面是rows  
  22.     private String order;// 排序方向,desc和asc  
  23.     private String sort;// 排序属性名,如price  
  24.   
  25.     // 标识操作是否成功  
  26.     private boolean operateSuccess;  
  27.   
  28.     // set注入  
  29.     public void setBookBiz(BookBiz bookBiz) {  
  30.         this.bookBiz = bookBiz;  
  31.     }  
  32.   
  33.     /* 
  34.      * 给easyui排序用的,表示排序方法 
  35.      */  
  36.     public void setOrder(String order) {  
  37.         this.order = order;  
  38.     }  
  39.   
  40.     /* 
  41.      * 给easyui排序用的,表示排序字段 
  42.      */  
  43.     public void setSort(String sort) {  
  44.         this.sort = sort;  
  45.     }  
  46.   
  47.     /* 
  48.      * 给easyui指定页面大小用的,如果要指定页面大小可变 
  49.      * 页面是rows 
  50.      */  
  51.     public void setRows(int size) {  
  52.         this.size = size;  
  53.     }  
  54.   
  55.     /* 
  56.      * 给easyui分页用的 
  57.      */  
  58.     public void setPage(int page) {  
  59.         this.page = page;  
  60.     }  
  61.   
  62.     // getter/setter方法  
  63.   
  64.     public Book getBook() {  
  65.         return book;  
  66.     }  
  67.   
  68.     public int getPage() {  
  69.         return page;  
  70.     }  
  71.   
  72.     public Map<String, Object> getData() {  
  73.         return data;  
  74.     }  
  75.   
  76.     public void setData(Map<String, Object> data) {  
  77.         this.data = data;  
  78.     }  
  79.   
  80.     public int getRows() {  
  81.         return size;  
  82.     }  
  83.   
  84.     public String getOrder() {  
  85.         return order;  
  86.     }  
  87.   
  88.     public String getSort() {  
  89.         return sort;  
  90.     }  
  91.   
  92.     public void setBook(Book book) {  
  93.         this.book = book;  
  94.     }  
  95.   
  96.     public boolean isOperateSuccess() {  
  97.         return operateSuccess;  
  98.     }  
  99.   
  100.     public void setOperateSuccess(boolean operateSuccess) {  
  101.         this.operateSuccess = operateSuccess;  
  102.     }  
  103.   
  104.     /** 
  105.      * 查询某一页的书籍 
  106.      */  
  107.     public String list() {  
  108.         data.clear();// 清除  
  109.         if (sort == null) {  
  110.             sort = "title";// 默认按书名排序  
  111.         }  
  112.         if (order == null) {  
  113.             order = "asc";// 默认按升序排序  
  114.         }  
  115.         data.put("rows", bookBiz.findPageBooks(page, size, sort, order));// 得到某一页的数据  
  116.         data.put("total", bookBiz.findTotal());// 得到所有的记录数  
  117.         return SUCCESS;  
  118.     }  
  119.   
  120.     /** 
  121.      * 添加书籍 
  122.      */  
  123.     public String addBook() {  
  124.         operateSuccess = (bookBiz.addBook(book) > 0);  
  125.         return SUCCESS;  
  126.     }  
  127.   
  128.     /** 
  129.      * 更新书籍 
  130.      */  
  131.     public String updateBook() {  
  132.         operateSuccess = (bookBiz.updateBook(book) > 0);  
  133.         return SUCCESS;  
  134.     }  
  135.   
  136.     /** 
  137.      * 删除书籍 
  138.      */  
  139.     public String deleteBook() {  
  140.         operateSuccess = (bookBiz.deleteBook(book.getId()) > 0);  
  141.         return SUCCESS;  
  142.     }  
  143.   
  144.     /** 
  145.      * 查询一本书 
  146.      */  
  147.     public String findBook() {  
  148.         book = bookBiz.findBook(book.getId());  
  149.         return SUCCESS;  
  150.     }  
  151.   
  152. }  

 

 

七、spring配置文件

Xml代码  
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"  
  4.     xmlns:tx="http://www.springframework.org/schema/tx"  
  5.     xsi:schemaLocation="http://www.springframework.org/schema/beans  
  6.     http://www.springframework.org/schema/beans/spring-beans-2.5.xsd  
  7.     http://www.springframework.org/schema/tx  
  8.     http://www.springframework.org/schema/tx/spring-tx-2.5.xsd  
  9.     http://www.springframework.org/schema/aop  
  10.     http://www.springframework.org/schema/aop/spring-aop-2.5.xsd">  
  11.   
  12.     <!-- 数据源 -->  
  13.     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">  
  14.         <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver">  
  15.         </property>  
  16.         <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl">  
  17.         </property>  
  18.         <property name="username" value="y2"></property>  
  19.         <property name="password" value="bdqn"></property>  
  20.     </bean>  
  21.   
  22.     <!-- 会话工厂 -->  
  23.     <bean id="sessionFactory"  
  24.         class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">  
  25.         <property name="dataSource">  
  26.             <ref bean="dataSource" />  
  27.         </property>  
  28.         <property name="hibernateProperties">  
  29.             <props>  
  30.                 <prop key="hibernate.dialect">  
  31.                     org.hibernate.dialect.Oracle10gDialect  
  32.                 </prop>  
  33.                 <prop key="show_sql">true</prop>  
  34.                 <prop key="format_sql">true</prop>  
  35.             </props>  
  36.         </property>  
  37.         <property name="mappingResources">  
  38.             <list>  
  39.                 <value>org/ajax/entity/Book.hbm.xml</value>  
  40.             </list>  
  41.         </property>  
  42.     </bean>  
  43.   
  44.     <!-- dao -->  
  45.     <bean id="bookDao" class="org.ajax.dao.impl.BookDaoImpl">  
  46.         <property name="sessionFactory" ref="sessionFactory" />  
  47.     </bean>  
  48.   
  49.     <!-- biz -->  
  50.     <bean id="bookBiz" class="org.ajax.biz.impl.BookBizImpl">  
  51.         <property name="bookDao" ref="bookDao" />  
  52.     </bean>  
  53.   
  54.     <!-- action -->  
  55.     <bean id="bookAction" class="org.ajax.action.BookAction">  
  56.         <property name="bookBiz" ref="bookBiz" />  
  57.     </bean>  
  58.   
  59.     <!-- 配置事务 -->  
  60.     <bean id="txManager"  
  61.         class="org.springframework.orm.hibernate3.HibernateTransactionManager">  
  62.         <property name="sessionFactory" ref="sessionFactory" />  
  63.     </bean>  
  64.     <!-- 定义事务通知 -->  
  65.     <tx:advice id="txAdvice" transaction-manager="txManager">  
  66.         <tx:attributes>  
  67.             <tx:method name="add*" propagation="REQUIRED" />  
  68.             <tx:method name="update*" propagation="REQUIRED" />  
  69.             <tx:method name="delete*" propagation="REQUIRED" />  
  70.             <tx:method name="find*" propagation="SUPPORTS" read-only="true" />  
  71.         </tx:attributes>  
  72.     </tx:advice>  
  73.     <!-- 定义哪些方法可以使用这些规则 -->  
  74.     <aop:config>  
  75.         <aop:pointcut id="bizMethod" expression="execution(* org.ajax.biz.*.*(..))" />  
  76.         <!-- 将事务通知与应用规则的方法组合 -->  
  77.         <aop:advisor advice-ref="txAdvice" pointcut-ref="bizMethod" />  
  78.     </aop:config>  
  79.   
  80. </beans>  

 

 

八、struts配置文件

Xml代码  
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">  
  3. <struts>  
  4.   
  5.     <!-- 由spring管理 -->  
  6.     <constant name="stuts.objectFactory" value="spring" />  
  7.   
  8.     <!-- 打开开发模式 -->  
  9.     <constant name="struts.devMode" value="true" />  
  10.   
  11.     <package name="book" extends="json-default" namespace="/">  
  12.         <!-- 显示所有的书籍 -->  
  13.         <action name="list" class="bookAction" method="list">  
  14.             <!-- 指定的属性作为根元素输出 -->  
  15.             <result type="json">  
  16.                 <param name="root">data</param>  
  17.             </result>  
  18.         </action>  
  19.   
  20.         <!-- 添加书籍 -->  
  21.         <action name="addBook" class="bookAction" method="addBook">  
  22.             <result type="json" />  
  23.         </action>  
  24.           
  25.         <!-- 删除书籍 -->  
  26.         <action name="deleteBook" class="bookAction" method="deleteBook">  
  27.             <result type="json" />  
  28.         </action>  
  29.           
  30.         <!-- 得到一本书 -->  
  31.         <action name="findBook" class="bookAction" method="findBook">  
  32.             <result type="json" />  
  33.         </action>  
  34.           
  35.         <!-- 更新书籍 -->  
  36.         <action name="updateBook" class="bookAction" method="updateBook">  
  37.             <result type="json" />  
  38.         </action>  
  39.   
  40.     </package>  
  41.   
  42. </struts>      

 

 

九、页面,book.jsp

Html代码  
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://" + request.getServerName() + ":"  
  5.             + request.getServerPort() + path + "/";  
  6. %>  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.ddd">  
  8. <html xmlns="http://www.w3.org/1999/xhtml">  
  9.     <head>  
  10.         <base href="<%=basePath%>" />  
  11.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  12.   
  13.         <link rel="stylesheet" type="text/css" href="script/themes/default/easyui.css" />  
  14.         <link rel="stylesheet" type="text/css" href="script/themes/icon.css" />  
  15.           
  16.         <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>  
  17.         <script type="text/javascript" src="script/jquery.easyui.min.js"></script>  
  18.         <script type="text/javascript" src="script/easyui-lang-zh_CN.js"></script>  
  19.   
  20.         <link rel="stylesheet" href="style/book.css" type="text/css" />  
  21.         <script type="text/javascript" src="script/book.js"></script>  
  22.           
  23.         <title>书籍操作</title>  
  24.     </head>  
  25.   
  26.     <body>  
  27.         <div id="main">  
  28.             <table id="bookbody">  
  29.             </table>  
  30.         </div>  
  31.         <!-- 编辑数据的div,默认看不到 -->  
  32.         <div id="divEdit">  
  33.                 <div id="tabEdit">  
  34.                     <form id="frmEdit">  
  35.                     <input type="hidden" id="id" name="book.id" />  
  36.                     <dl>  
  37.                         <dd>  
  38.                             ISBN:  
  39.                         </dd>  
  40.                         <dd>  
  41.                             <input type="text" size="15" id="isbn" name="book.isbn" />  
  42.                         </dd>  
  43.                     </dl>  
  44.                     <dl>  
  45.                         <dd>  
  46.                             书名:  
  47.                         </dd>  
  48.                         <dd>  
  49.                             <input type="text" size="40" id="title" name="book.title" />  
  50.                         </dd>  
  51.                     </dl>  
  52.                     <dl>  
  53.                         <dd>  
  54.                             价格¥:  
  55.                         </dd>  
  56.                         <dd>  
  57.                             <input type="text" size="10" id="price" name="book.price" />  
  58.                         </dd>  
  59.                     </dl>  
  60.                     <dl>  
  61.                         <dd>  
  62.                             出版日期:  
  63.                         </dd>  
  64.                         <dd>  
  65.                             <input type="text" style="width: 150px" id="pubdate" name="book.pubdate" />  
  66.                         </dd>  
  67.                     </dl>  
  68.                     <dl>  
  69.                         <dd>  
  70.                             简介:  
  71.                         </dd>  
  72.                         <dd>  
  73.                             <textarea cols="45" rows="3" id="intro" name="book.intro"></textarea>  
  74.                         </dd>  
  75.                     </dl>  
  76.                     </form>  
  77.                 </div>  
  78.         </div>  
  79.     </body>  
  80. </html>  

 

 

十、脚本文件,book.js

Js代码  
  1. //JQuery的入口  
  2. $(function() {  
  3.     listBook();  
  4.     // 日期加上日期控件  
  5.     $("#pubdate").datebox({  
  6.         required : true  
  7.     });  
  8.     // 给文本框加上验证器  
  9.     $("#isbn").validatebox({  
  10.         required : true  
  11.     });  
  12.     // 书名的验证  
  13.     $("#title").validatebox({  
  14.         required : true,  
  15.         missingMessage : '书名不能为空'  
  16.     });  
  17.     // 价格用货币验证框  
  18.     $("#price").numberbox({  
  19.         required : true,  
  20.         min : 5.5,  
  21.         max : 9999,  
  22.         precision : 2,  
  23.         missingMessage : '请输入价格'  
  24.     });  
  25.     // 简介加验证  
  26.     $("#intro").validatebox({  
  27.         required : true  
  28.     });  
  29. });  
  30.   
  31. // 加载书籍列表  
  32. function listBook() {  
  33.     $("#bookbody").datagrid({  
  34.         width : 600,  
  35.         height : "auto",  
  36.         iconCls : 'icon-help'// 表格左上角的图标样式  
  37.         url : 'list.action'// 访问服务器的地址,要求返回JSON对象  
  38.         rownumbers : true// 在最前面显示行号  
  39.         fitColumns : true// 自动适应列宽  
  40.         pagination : true// 在底部显示分页工具栏  
  41.         striped : true// 隔行变色  
  42.         singleSelect : true// 每次只选中一行  
  43.         loadMsg : '加载书籍列表ing……',  
  44.         pageSize : 5, // 指定每页的大小,服务器要加上page属性和total属性  
  45.         remoteSort : true// 从服务器端排序,默认true  
  46.         pageList : [ 3, 5, 10 ], // 可以设置每页记录条数的列表,服务器要加上rows属性  
  47.         idField : 'id'// 主键属性  
  48.   
  49.         toolbar : [ {// 工具栏  
  50.             text : '添加',  
  51.             iconCls : 'icon-add'// 图标  
  52.             handler : function() { // 处理函数  
  53.                 addBook();  
  54.             }  
  55.         }, {  
  56.             text : '删除',  
  57.             iconCls : 'icon-cancel'// 图标  
  58.             handler : function() { // 处理函数  
  59.                 deleteBook();  
  60.             }  
  61.         }, {  
  62.             text : '编辑',  
  63.             iconCls : 'icon-edit',// 图标  
  64.             handler : function() {// 处理函数  
  65.                 editBook();  
  66.             }  
  67.         } ],  
  68.   
  69.         columns : [ [ {  
  70.             field : 'isbn',  
  71.             title : 'ISBN',  
  72.             width : 70  
  73.         }, {  
  74.             field : 'title',  
  75.             title : '书籍名称',  
  76.             // 可以排序,但服务器也完成相应的代码,要加入sort和order属性  
  77.             sortable : true  
  78.         }, {  
  79.             field : 'price',  
  80.             title : '价格',  
  81.             align : 'right',  
  82.             width : 60,  
  83.             sortable : true,  
  84.             formatter : function(value) {  
  85.                 return "$" + value;  
  86.             }  
  87.         }, {  
  88.             field : 'pubdate',  
  89.             title : '出版日期',  
  90.             sortable : true,  
  91.             formatter : function(value) {  
  92.                 return value.substring(0, 10);  
  93.             }  
  94.         } ] ]  
  95.     });  
  96. }  
  97.   
  98. // 显示编辑窗口  
  99. function showEditForm() {  
  100.     $("#tabEdit").dialog({  
  101.         modal : true,// 模式窗口  
  102.         title : '书籍操作',  
  103.         iconCls : 'icon-save',  
  104.         buttons : [ {  
  105.             text : '确认',  
  106.             handler : function() {  
  107.                 // 进行表单字段验证,当全部字段都有效时返回true和validatebox一起使用  
  108.                 if ($('#frmEdit').form('validate')) {  
  109.                     // 提交到服务器并写入数据库  
  110.                     dealSave();  
  111.                     // 关闭窗口  
  112.                     closeForm();  
  113.                 } else {  
  114.                     $.messager.alert('验证''书籍信息有误或不完整''error');  
  115.                 }  
  116.             }  
  117.         }, {  
  118.             text : '取消',  
  119.             handler : function() {  
  120.                 closeForm();  
  121.             }  
  122.         } ]  
  123.     });  
  124. }  
  125.   
  126. // 关闭窗口  
  127. function closeForm() {  
  128.     $("#frmEdit").form('clear');  
  129.     $('#tabEdit').dialog('close');  
  130. }  
  131.   
  132. // 添加的函数  
  133. function addBook() {  
  134.     // 清空原有的数据  
  135.     $('#frmEdit').form('clear');  
  136.     // 显示添加对话框  
  137.     showEditForm();  
  138. }  
  139.   
  140. // 编辑按钮的操作  
  141. function editBook() {  
  142.     var book = $('#bookbody').datagrid('getSelected');// 得到选中的一行数据  
  143.     // 如果没有选中记录  
  144.     if (book == null) {  
  145.         $.messager.alert('书籍''请先选中要编辑的书籍''info');  
  146.         return;  
  147.     }  
  148.     $('#frmEdit').form('clear');  
  149.     // 填充数据  
  150.     $("#id").val(book.id);  
  151.     $("#isbn").val(book.isbn);  
  152.     $("#title").val(book.title);  
  153.     $("#price").numberbox("setValue", book.price);  
  154.     // 给默认值  
  155.     $("#pubdate").datebox("setValue", book.pubdate.substring(0, 10));  
  156.     $("#intro").val(book.intro);  
  157.     // 显示编辑页面  
  158.     showEditForm();  
  159. }  
  160.   
  161. // 在增加和更新时点确定按钮的处理函数  
  162. function dealSave() {  
  163.     // 表单数据序列化成一个字符串用&拼接  
  164.     var params = $("#frmEdit").serialize();  
  165.     // 得到id的值,为空串表示添加  
  166.     if ($("#id").val() == "") {  
  167.         $.post("addBook.action", params, function(result) {  
  168.             if (result.operateSuccess) {  
  169.                 $('#bookbody').datagrid('reload');// 重新加载  
  170.                 $.messager.alert('添加''添加成功''info');  
  171.             } else {  
  172.                 $.messager.alert('添加''添加失败''warning');  
  173.             }  
  174.         });  
  175.     } else {  
  176.         // 表示更新  
  177.         $.post("updateBook.action", params, function(result) {  
  178.             if (result.operateSuccess) {  
  179.                 $('#bookbody').datagrid('reload');// 重新加载  
  180.                 $.messager.alert('更新''更新成功''info');  
  181.             } else {  
  182.                 $.messager.alert('更新''更新失败''warning');  
  183.             }  
  184.         });  
  185.     }  
  186. }  
  187.   
  188. // 删除书籍  
  189. function deleteBook() {  
  190.     var book = $('#bookbody').datagrid('getSelected');// 得到选中的一行数据  
  191.     // 如果没有选中记录  
  192.     if (book == null) {  
  193.         $.messager.alert('删除''请先选中要删除的书籍''info');  
  194.         return;  
  195.     }  
  196.     $.messager.confirm('确认''真的要删除选中的记录吗?'function(r) {  
  197.         if (r) {  
  198.             var url = "deleteBook.action?book.id=" + book.id;  
  199.             // 试一下get方法(地址,回调函数)  
  200.             $.get(url, function(result) {  
  201.                 if (result.operateSuccess) {  
  202.                     $.messager.alert('删除''选中的书籍成功删除!''info');  
  203.                     // 重新加载  
  204.                     $("#bookbody").datagrid('reload');  
  205.                 } else {  
  206.                     $.messager.alert('删除''删除失败!''warning');  
  207.                 }  
  208.             });  
  209.         }  
  210.     });  
  211. }  

 

 

十一、css,book.css

Css代码  
  1. #divEdit {  
  2.     display: none;  
  3. }  
  4.   
  5. * {  
  6.     font: 12px Arial;  
  7. }  
  8.   
  9. div#main {  
  10.     margin: 0px auto;  
  11.     width: 600px;  
  12. }  
  13.   
  14.   
  15. #tabEdit input[type="text"],#tabEdit textarea {  
  16.     border: solid #66ccff 1px;  
  17. }  
  18.   
  19. #tabEdit dl {  
  20.     padding-right: 35px;  
  21. }     

 

 

十二、demo

 JQuery-EasyUI-Book.zip

  • JQuery-EasyUI-Book.zip (1.8 MB)
  • 下载次数: 34

你可能感兴趣的:(SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子)