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