struts2+spring+mybatis datagrid增删改查以及分页的实现

经过这几天的努力，终于把所有的功能都实现了。借鉴了大神们的太多，感谢你们。

那我就慢慢贴出我的代码。

一：easyUi 和struts2+spring+mybatis 环境搭建

二：基本配置

1.web.xml

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="3.0"   
3.     xmlns="http://java.sun.com/xml/ns/javaee"   
4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
6.     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
7.   <display-name></display-name>   
8.     <context-param>  
9.         <param-name>contextConfigLocation</param-name>  
10.         <param-value>classpath:applicationContext.xml</param-value>  
11.     </context-param>  
12.     <!-- spring监听器，加载xml文件 -->  
13.     <listener>  
14.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
15.     </listener>  
16.     <!-- struts 前端控制器 -->  
17.     <filter>  
18.         <filter-name>struts2</filter-name>  
19.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
20.     </filter>  
21.     <filter-mapping>  
22.         <filter-name>struts2</filter-name>  
23.         <url-pattern>/*</url-pattern>  
24.     </filter-mapping>  
25. </web-app>  

2.applicationContext.xml

[html] view plain copy

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"  
4.        xmlns:context="http://www.springframework.org/schema/context"  
5.        xmlns:aop="http://www.springframework.org/schema/aop"  
6.        xmlns:tx="http://www.springframework.org/schema/tx"  
7.        xsi:schemaLocation="http://www.springframework.org/schema/beans   
8.                            http://www.springframework.org/schema/beans/spring-beans.xsd  
9.                            http://www.springframework.org/schema/context   
10.                            http://www.springframework.org/schema/context/spring-context.xsd  
11.                            http://www.springframework.org/schema/aop   
12.                            http://www.springframework.org/schema/aop/spring-aop.xsd  
13.                            http://www.springframework.org/schema/tx   
14.                            http://www.springframework.org/schema/tx/spring-tx.xsd">  
15.       
16. <!--     数据源  
17.      <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
18.         <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property>  
19.         <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"></property>  
20.         <property name="username" value="vsplat_demo"></property>  
21.         <property name="password" value="root"></property>  
22.     </bean>  -->  
23.     <context:property-placeholder location="classpath:c3p0.properties"/>  
24.       
25.         <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">  
26.             <property name="driverClass" value="${C3p0_class}"></property>  
27.             <property name="jdbcUrl" value="${C3p0_url}"></property>          
28.             <property name="user" value="${C3p0_username}"></property>        
29.             <property name="password" value="${C3p0_password}"></property>    
30.         </bean>   
31.           
32.     <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  
33.         <property name="configLocation" value="classpath:sqlMapConfig.xml"></property>  
34.         <property name="dataSource" ref="dataSource"></property>  
35.   
36.     </bean>  
37.       
38.     <!-- 事务相关控制 -->  
39.     <bean name="transactionManager"  
40.         class="org.springframework.jdbc.datasource.DataSourceTransactionManager">  
41.         <property name="dataSource" ref="dataSource"/>  
42.     </bean>  
43.   
44.     <!-- 通知 -->  
45.     <tx:advice id="tx"  
46.         transaction-manager="transactionManager">  
47.         <tx:attributes>  
48.             <tx:method name="delete*" propagation="REQUIRED" />  
49.             <tx:method name="insert*" propagation="REQUIRED" />  
50.             <tx:method name="update*" propagation="REQUIRED" />  
51.             <tx:method name="find*" read-only="true" />  
52.             <tx:method name="get*" read-only="true" />  
53.             <tx:method name="select*" read-only="true" />  
54.         </tx:attributes>  
55.     </tx:advice>  
56.   
57.     <aop:config>  
58.         <aop:pointcut id="pc" expression="execution(* com.test.service.*.*(..))" />  
59.         <!--把事务控制在Service层-->  
60.         <aop:advisor pointcut-ref="pc" advice-ref="tx" />  
61.     </aop:config>  
62.       
63.     <bean id="IJobDao" class="com.test.daoImpl.JobDaoImpl">  
64.         <property name="sqlSessionFactory" ref="sessionFactory"></property>  
65.     </bean>  
66.       
67.     <bean id="jobService" class="com.test.serviceImpl.JobServiceImpl">  
68.         <property name="iJobDao" ref="IJobDao"></property>  
69.     </bean>     
70.     <bean id="jobAction" class="com.test.action.JobAction" scope="prototype">  
71.         <property name="jobService" ref="jobService">  
72.         </property>  
73.     </bean>  
74. </beans>  

3.sqlMapConfig.xml

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE configuration  
3. PUBLIC "-//mybatis.org//DTD Config 3.0//EN"  
4. "http://mybatis.org/dtd/mybatis-3-config.dtd">  
5. <configuration>      
6.    <typeAliases>  
7.         <typeAlias type="com.test.entity.JobModel" alias="jobModel"></typeAlias>  
8.     </typeAliases>  
9.     <mappers>  
10.         <mapper resource="com/test/serviceImpl/JobMapper.xml"/>  
11.     </mappers>  
12. </configuration>  

4.JobMapper.xml

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE mapper  
3. PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
4. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
5.   
6. <mapper namespace="com.test.entity.JobModel">  
7.     <sql id="cols">  
8.         id,name,job_name,salary,start_date  
9.     </sql>  
10.     <sql id="ucols">  
11.         name=#{name},job_name=#{job_name},salary=#{salary},start_date=#{start_date}  
12.     </sql>  
13.   
14.     <!-- 查询所有记录 -->  
15.     <select id="listAll" resultType="com.test.entity.JobModel">  
16.         select <include refid="cols"/> from test_job  
17.     </select>  
18.       
19.     <!-- 按条件查询 -->  
20.     <select id="find" parameterType="com.test.entity.JobModel" resultType="com.test.entity.JobModel">  
21.         select * from test_job   
22.         <where>  
23.         <if test="name!=null">  
24.             and name like "%"#{name}"%"  
25.         </if>  
26.         </where>  
27.     </select>  
28.       
29.     <!-- 查询一个用户 -->  
30.     <select id="get" parameterType="string" resultType="com.test.entity.JobModel">  
31.         select <include refid="cols"/> from test_job where id=#{id}  
32.     </select>  
33.       
34.     <!-- 新增 -->  
35.     <insert id="add" parameterType="com.test.entity.JobModel">  
36.         insert into test_job (id,name,job_name,salary,start_date) values(#{id},#{name},#{job_name},#{salary},#{start_date})  
37.     </insert>  
38.       
39.     <!-- 修改 -->  
40.     <update id="update" parameterType="com.test.entity.JobModel">  
41.         update test_job set  <include refid="ucols"/>  
42.         where id=#{id}  
43.     </update>  
44.       
45.     <!-- 删除 -->  
46.     <delete id="delete" parameterType="string">  
47.         delete from test_job where id=#{id}  
48.     </delete>  
49.     <!-- 分页查询显示所有 -->  
50.     <select id="findAllPage" resultType="com.test.entity.JobModel" parameterType="Integer">  
51.         select * from test_job order by go asc limit #{page},#{rows};  
52.     </select>  
53.     <!-- 按部门查询 -->  
54.     <select id="getByJobName" resultType="com.test.entity.JobModel" parameterType="string">  
55.         select * from test_job where job_name=#{job_name}  
56.     </select>               
57. </mapper>  

5.struts.xml

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC      
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"     
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5. <struts>  
6.      <constant name="struts.ui.theme" value="simple"></constant>  
7.      <constant name="struts.devMode" value="true"></constant>  
8.      <constant name="struts.objectFactory" value="spring"></constant>      
9.      <package name="jobModel" namespace="/" extends="json-default">  
10.         <action name="jobAction_*" class="com.test.action.JobAction" method="{1}">             
11.                   <result type="json" name="plist">  
12.                     <param name="root">result</param>>  
13.                 </result>     
14.                 <result type="json" name="list">    
15.                     <param name="root">result2</param>>  
16.                 </result>  
17.           </action>  
18.      </package>  
19. </struts>  

6.实体类

[java] view plain copy

1. package com.test.entity;  
2.   
3. public class JobModel {  
4.     private String id;  
5.     private String name;  
6.     private String job_name;  
7.     private String salary;  
8.     private String start_date;  
9.     private int go ;  
10.       
11.     public int getGo() {  
12.         return go;  
13.     }  
14.     public void setGo(int go) {  
15.         this.go = go;  
16.     }  
17.     public JobModel() {  
18.         // TODO Auto-generated constructor stub  
19.     }  
20.     public String getId() {  
21.         return id;  
22.     }  
23.     public void setId(String id) {  
24.         this.id = id;  
25.     }  
26.     public String getName() {  
27.         return name;  
28.     }  
29.     public void setName(String name) {  
30.         this.name = name;  
31.     }  
32.     public String getJob_name() {  
33.         return job_name;  
34.     }  
35.     public void setJob_name(String job_name) {  
36.         this.job_name = job_name;  
37.     }  
38.     public String getSalary() {  
39.         return salary;  
40.     }  
41.     public void setSalary(String salary) {  
42.         this.salary = salary;  
43.     }  
44.     public String getStart_date() {  
45.         return start_date;  
46.     }  
47.     public void setStart_date(String start_date) {  
48.         this.start_date = start_date;  
49.     }  
50.           
51. }  

我增加了一个go字段，排序用。(之前表设置太随意，只好再加上个字段)

7.dao实现类

[java] view plain copy

1. package com.test.daoImpl;  
2.   
3. import java.util.List;  
4.   
5. import org.mybatis.spring.support.SqlSessionDaoSupport;  
6.   
7. import com.test.dao.IJobDao;  
8. import com.test.entity.JobModel;  
9. import com.test.utils.Pager;  
10.   
11. public class JobDaoImpl extends SqlSessionDaoSupport implements IJobDao{  
12.   
13.     @Override  
14.     public List<JobModel> list() {  
15.         return this.getSqlSession().selectList("com.test.entity.JobModel.listAll");  
16.     }  
17.   
18.     @Override  
19.     public JobModel get(String id) {  
20.         // TODO Auto-generated method stub  
21.         return (JobModel) this.getSqlSession().selectOne("com.test.entity.JobModel.get",id);  
22.     }  
23.   
24.     @Override  
25.     public int insert(JobModel u) {  
26.         // TODO Auto-generated method stub  
27.         return this.getSqlSession().insert("com.test.entity.JobModel.add",u);  
28.     }  
29.   
30.     @Override  
31.     public int update(JobModel u) {  
32.         // TODO Auto-generated method stub  
33.         return this.getSqlSession().update("com.test.entity.JobModel.update",u);  
34.     }  
35.   
36.     @Override  
37.     public int deleteById(String id) {  
38.         // TODO Auto-generated method stub  
39.         return this.getSqlSession().delete("com.test.entity.JobModel.delete",id);  
40.     }  
41.   
42.     @Override  
43.     public List<JobModel> getTeacherList(int page, int rows) {  
44.         // TODO Auto-generated method stub        
45.         Pager pager = new Pager();  
46.         pager.setPage(page);  
47.         pager.setRows(rows);  
48.         return this.getSqlSession().selectList("com.test.entity.JobModel.findAllPage", pager);  
49.     }  
50.   
51.     @Override  
52.     public List<JobModel> getListByCondition(String condition) {  
53.         // TODO Auto-generated method stub  
54.         return this.getSqlSession().selectList("com.test.entity.JobModel.getByJobName",condition);  
55.     }  
56. }  

8.service实现类：

[java] view plain copy

1. package com.test.serviceImpl;  
2.   
3. import java.util.List;  
4.   
5. import com.test.dao.IJobDao;  
6. import com.test.entity.JobModel;  
7. import com.test.service.JobService;  
8.   
9.   
10. public class JobServiceImpl implements JobService {  
11.   
12.     private IJobDao iJobDao;  
13.       
14.     public IJobDao getiJobDao() {  
15.         return iJobDao;  
16.     }  
17.   
18.     public void setiJobDao(IJobDao iJobDao) {  
19.         this.iJobDao = iJobDao;  
20.     }  
21.   
22.   
23.     public int deleteById(String id) {  
24.         int i = iJobDao.deleteById(id);  
25.         return i;  
26.     }  
27.   
28.     public JobModel get(String id) {  
29.         return iJobDao.get(id);  
30.     }  
31.   
32.     public int insert(JobModel u) {  
33.         return iJobDao.insert(u);  
34.     }  
35.   
36.     public List<JobModel> list() {  
37.         return iJobDao.list();  
38.     }  
39.   
40.     public int update(JobModel u) {  
41.         return iJobDao.update(u);  
42.     }  
43.     @SuppressWarnings("unchecked")  
44.     public List<JobModel> listWithPage(int page,int rows) {  
45.         return iJobDao.getTeacherList(page, rows);  
46.     }  
47.   
48.     @Override  
49.     public List<JobModel> getByJob(String jobName) {  
50.         // TODO Auto-generated method stub  
51.         return iJobDao.getListByCondition(jobName);  
52.     }  
53.   
54.   
55. }  

9.action类

[java] view plain copy

1. package com.test.action;  
2.   
3. import java.util.HashMap;  
4. import java.util.List;  
5. import java.util.Map;  
6.   
7. import com.opensymphony.xwork2.ActionContext;  
8. import com.opensymphony.xwork2.ActionSupport;  
9. import com.opensymphony.xwork2.ModelDriven;  
10. import com.test.entity.JobModel;  
11. import com.test.service.JobService;  
12.   
13. public class JobAction extends ActionSupport implements ModelDriven<JobModel> {  
14.     private JobModel model = new JobModel();  
15.     private Map<String, Object> result = new HashMap<String, Object>(); // result变量用于传送Json变量的返回值    
16.     private Map<String, Object> result2 = new HashMap<String, Object>();   
17.     private String page;  
18.     private String rows;  
19.     private String queryWord;  
20.     private String queryType;  
21.       
22.     public String getQueryWord() {  
23.         return queryWord;  
24.     }  
25.     public void setQueryWord(String queryWord) {  
26.         this.queryWord = queryWord;  
27.     }  
28.     public String getQueryType() {  
29.         return queryType;  
30.     }  
31.     public void setQueryType(String queryType) {  
32.         this.queryType = queryType;  
33.     }  
34.     public Map<String, Object> getResult2() {  
35.         return result2;  
36.     }  
37.     public void setResult2(Map<String, Object> result2) {  
38.         this.result2 = result2;  
39.     }  
40.   
41.     public Map<String, Object> getResult() {  
42.         return result;  
43.     }  
44.     public void setResult(Map<String, Object> result) {  
45.         this.result = result;  
46.     }  
47.     public String getPage() {  
48.         return page;  
49.     }  
50.     public void setPage(String page) {  
51.         this.page = page;  
52.     }  
53.     public String getRows() {  
54.         return rows;  
55.     }  
56.     public void setRows(String rows) {  
57.         this.rows = rows;  
58.     }  
59.     public JobModel getModel() {  
60.         return model;  
61.     }  
62.   
63.     private JobService jobService;  
64.   
65.     public JobService getJobService() {  
66.         return jobService;  
67.     }  
68.     public void setJobService(JobService jobService) {  
69.         this.jobService = jobService;  
70.     }  
71.     public void setModel(JobModel model) {  
72.         this.model = model;  
73.     }  
74.     public String listByJob(){  
75.         List<JobModel> dataList = jobService.getByJob(queryWord) ;  
76.         result2.put("total", dataList.size());//total键 存放总记录数，必须的    
77.         result2.put("rows", dataList);//rows键 存放每页记录 list             
78.         return "list" ;  
79.     }  
80.     public String list(){    
81.         int pages = Integer.parseInt(page) ;  
82.         int rowss = Integer.parseInt(rows) ;  
83.           
84.         List<JobModel> pageList = jobService.listWithPage((pages-1)*rowss ,rowss ) ;  
85.         List<JobModel> dataList = jobService.list() ;  
86.         result.put("total", dataList.size());//total键 存放总记录数，必须的    
87.         result.put("rows", pageList);//rows键 存放每页记录 list     
88.         System.out.println("---------------"+pageList.size());  
89.         System.out.println("page"+page);  
90.         System.out.println("rows"+rows);  
91.         return "plist";  
92.     }  
93.           
94.     public String createSave(){       
95.         jobService.insert(model);  
96.         return null;  
97.     }      
98.     public String updateSave(){  
99.         jobService.update(model);  
100.           
101.         return null;  
102.     }  
103.       
104.     public String delete(){  
105.         jobService.deleteById(model.getId());         
106.         return null;  
107.     }  
108. }  

10.easuUi.jsp

[html] view plain copy

1. <%@ page language="java"  pageEncoding="utf-8"%>  
2. <%@ taglib prefix="s"  uri="/struts-tags"%>  
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
4. <html>  
5.  <head>  
6.      <title>easyUi</title>  
7.     <!-- 引入JQuery -->       
8.     <script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/jquery.min.js"></script>  
9.     <!-- 引入EasyUI -->  
10.     <script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/jquery.easyui.min.js"></script>  
11.     <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->  
12.     <script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>   
13.      <script type="text/javascript" src="${pageContext.request.contextPath}/js/table.js"></script>            
14.     <script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>                 
15.     <!-- 引入EasyUI的样式文件-->    
16.     <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/default/easyui.css" type="text/css"/>  
17.      <!-- 引入EasyUI的图标样式文件-->  
18.     <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/icon.css" type="text/css"/>  
19.      <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/icon.css" type="text/css"/>            
20.     <script type="text/javascript">      
21.         //根据职位查询          
22.     function reloadgrid ()  {    
23.        //查询参数直接添加在url中           
24.         var url =$('#dg').datagrid('options').url;  
25.         var queryWord = $('#userAccount').val() ;        
26.              url = "jobAction_listByJob.action" ;  //重新赋值url 属性  
27.             $('#dg').datagrid('options').url=url;   
28.             //查询参数直接添加在queryParams中      
29.             var queryParams = $('#dg').datagrid('options').queryParams;            
30.             var queryType = "job_name" ;  
31.             queryParams.queryWord = queryWord;    
32.             queryParams.queryType = queryType;   
33.             $('#dg').datagrid('options').queryParams=queryParams;             
34.             //前段分页  
35.  function pagerFilter(data){  
36.             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组  
37.                 data = {  
38.                     total: data.length,  
39.                     rows: data  
40.                 }  
41.             }  
42.             var dg = $(this);  
43.             var opts = dg.datagrid('options');  
44.             var pager = dg.datagrid('getPager');  
45.             pager.pagination({  
46.                 onSelectPage:function(pageNum, pageSize){  
47.                     opts.pageNumber = pageNum;  
48.                     opts.pageSize = pageSize;  
49.                     pager.pagination('refresh',{  
50.                         pageNumber:pageNum,  
51.                         pageSize:pageSize  
52.                     });  
53.                     dg.datagrid('loadData',data);  
54.                 }  
55.             });  
56.             if (!data.originalRows){  
57.                 data.originalRows = (data.rows);  
58.             }  
59.             var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
60.             var end = start + parseInt(opts.pageSize);  
61.             data.rows = (data.originalRows.slice(start, end));  
62.             return data;  
63.         }  
64.    
65.         $(function(){//加载数据  
66.             $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());  
67.         });  
68.                   
69.         }    
70.         function list(){  
71.                $('#dg').datagrid('options').url="jobAction_list" ;  
72.                $('#dg').datagrid('reload');  
73.         }  
74.        //打开添加窗口  
75.        function addUser(){  
76.          $('#dlg').dialog('open').dialog('setTitle','添加用户');  
77.          $('#fm').form('clear');  
78.        }  
79.        //添加用户  
80.        function saveUser(){  
81.           $.messager.progress();//显示一个进度条  
82.           $('#fm').form('submit',{  
83.           url:'jobAction_createSave.action',  
84.           onsubmit:function(){  
85.             var isValid=$(this).form('validate');  
86.             if(!isValid){  
87.               $.messager.progress('close');//当form不合法时隐藏工具条  
88.             }  
89.             return isValid;//返回false，将停止提交  
90.           },  
91.           success:function(data){  
92.             $.messager.progress('close');//成功提交，隐藏进度条  
93.             $('#dlg').dialog('close');  
94.             $('#dg').datagrid('reload');  
95.             $.messager.show({  
96.               title:'操作提示',  
97.               msg:"添加成功！",  
98.               timeout:5000,  
99.               showType:'slide'  
100.             });  
101.           }  
102.           });  
103.        }  
104.        //删除用户        
105.        function delUser(){  
106.          var rows=$('#dg').datagrid('getSelected');  
107.          if(rows){  
108.            $.messager.confirm('Confirm','确定删除选中行数据？',function(r){  
109.              if(r){   
110.                $.post('jobAction_delete.action?id='+rows.id,function(data){  
111.                  $('#dg').datagrid('reload');  
112.                  $.messager.show({  
113.                    title:'操作提示',  
114.                    msg:"删除成功！",  
115.                    timeout:5000,  
116.                    showType:'slide'  
117.                  });  
118.                });  
119.              }  
120.            });  
121.          }else{  
122.           $.messager.show({  
123.             title:'操作提示',  
124.             msg:"请选择要删除的行。。。",  
125.             timeout:5000,  
126.             showType:'slide'  
127.           });  
128.          }  
129.        }        
130.        //打开编辑 并回显数据  
131.        function updUser(){     
132.          var rows = $('#dg').datagrid('getSelected');  
133.           if(rows){  
134.           $('#update').dialog('open').dialog('setTitle','更新用户');  
135.           $('#update-fm').form('clear');         
136.            $('#id').val(rows.id);  
137.            $('#name').val(rows.name);  
138.            $('#job_name').val(rows.job_name);  
139.            $('#salary').val(rows.salary);  
140.            $('#start_date').val(rows.start_date);            
141.            }else{  
142.             $.messager.show({  
143.             title:'操作提示',  
144.             msg:'请选择一行数据进行修改。。。',  
145.             timeout:5000,  
146.             showType:'slide'  
147.             });  
148.            }  
149.        }         
150.        //执行编辑操作  
151.        function updUser2(){  
152.         var row =$('#dg').datagrid('getSelected');  
153.          $.messager.progress(); // 显示一个进度条   
154.         $('#update-fm').form('submit', {  
155.         url: 'jobAction_updateSave.action',  
156.         onSubmit: function(){  
157.             var isValid = $(this).form('validate');  
158.             if (!isValid){  
159.                 $.messager.progress('close');   // 当form不合法的时候隐藏工具条  
160.             }  
161.         return isValid; // 返回false将停止form提交   
162.     },  
163.     success: function(data){  
164.         $.messager.progress('close');   // 当成功提交之后隐藏进度条  
165.         $("#update").dialog("close");  
166.         $("#dg").datagrid("reload");  
167.         $.messager.show({  
168.             title:'操作提示',  
169.             msg:"修改成功",  
170.             timeout:5000,  
171.             showType:'slide'  
172.         });  
173.           
174.     }  
175. });  
176. }  
177.   
178.     </script>       
179.     </head>  
180.   <body>        
181.      <table id="dg" ></table>        
182.       <body>   
183.     <!-- 添加用户 -->  
184.        <div id="dlg" class="easyui-dialog" style="width:300px;height:200px;padding:20px 20px"  
185.         closed="true" buttons="#add-buttons">  
186.        <form id="fm" method="post">  
187.          <div class="fitem">  
188.            <label> I  D：</label>  
189.            <input type="text" name="id" class="easyui-validatebox" required="true"/>  
190.          </div>  
191.            <div class="fitem">  
192.            <label>姓名：</label>  
193.            <input type="text" name="name" class="easyui-validatebox" required="true"/>  
194.          </div>  
195.            <div class="fitem">  
196.            <label>职位：</label>  
197.            <input type="text" name="job_name" class="easyui-validatebox" required="true"/>  
198.          </div>  
199.          <div class="fitem">  
200.            <label>薪资：</label>  
201.            <input type="text" name="salary" class="easyui-validatebox" required="true"/>  
202.          </div>  
203.          <div class="fitem">  
204.            <label>时间：</label>  
205.            <input type="text" name="start_date" class="easyui-validatebox" required="true"/>  
206.          </div>  
207.        </form>  
208.      </div>       
209.      <div id="add-buttons">  
210.        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">添加</a>  
211.        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>  
212.      </div>     
213.   <div id="update" class="easyui-dialog" style="width:320px;height:320px;padding:10px 20px"  
214.      closed="true" buttons="#update-buttons">  
215.        <form id="update-fm" method="post">  
216.          <input type="hidden" name="id" id="id" /><br/>  
217.                                姓名：<input type="text" name="name" id="name"    class="easyui-validatebox"/><br/>  
218.            职位：<input type="text" name="job_name" id="job_name"   class="easyui-validatebox"/><br/>  
219.            薪资：<input type="text" name="salary" id="salary" class="easyui-validatebox" /><br/>  
220.            时间  ：<input type="text" name="start_date" id="start_date" class="easyui-validatebox" /><br/>  
221.        </form>  
222.        <div id="#update-buttons">  
223.        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updUser2()">修改</a>  
224.        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>  
225.      </div>    
226.      </div>          
227.      </body>         
228. </html>  

11.引入的table.js

[javascript] view plain copy

1. $(function() {  
2.     datagrid = $("#dg").datagrid({  
3.         url : 'jobAction_list',// 加载的URL  
4.         isField : "id",  
5.         width : 600,  
6.         rownumbers: true,  
7.         pagination : true,// 显示分页  
8.         pageSize : 5,// 分页大小  
9.         pageList : [ 5, 10, 15, 20 ],// 每页的个数  
10.         checkbox:true,  
11.         selectOnCheck: true,          
12.         checkOnSelect: true,  
13.         fitColumns : false,  
14.         iconCls : "icon-save",// 图标  
15.         title : "教师管理",  
16.          sortOrder: "asc",  
17.          sortName: "Id",     
18.         columns : [ [ // 每个列具体内容  
19.         {  
20.             field : 'id',  
21.             title : '工号',  
22.             width : 100,  
23.         }, {  
24.             field : 'name',  
25.             title : '姓名',  
26.             width : 100  
27.         }, {  
28.             field : 'job_name',  
29.             title : '职位',  
30.             width : 100  
31.         }, {  
32.             field : 'salary',  
33.             title : '薪资',  
34.             width : 100,  
35.         }, {  
36.             field : 'start_date',  
37.             title : '入职时间',  
38.             width : 100,  
39.         }, ] ],  
40.         toolbar : [ // 工具条        
41.             {  
42.                 text: '职位<input type="text" id="userAccount"/>'  
43.             },  
44.             {  
45.                 test:'<select type="text" id="selectCondition"/>'  
46.                       
47.             },  
48.             {  
49.                 text : "查询",  
50.                 iconCls : "icon-search",  
51.                 handler : function() {// 回调函数  
52.                      var queryWord = $('#userAccount').val() ;  
53.                      if(queryWord == "" ){  
54.                          list() ;  
55.                      }else{  
56.                          reloadgrid( ) ;  
57.                      }                                                 
58.                 }                 
59.           },  
60.         {  
61.             text : "增加",  
62.             iconCls : "icon-add",  
63.             handler : function() {// 回调函数  
64.                 $('#wass').window('open') ;  
65.                 addUser();  
66.             }  
67.         }, {  
68.             text : "删除",  
69.             iconCls : "icon-remove",  
70.             handler : function() {  
71.             //  alert('add');  
72.                 var row = $('#dg').datagrid('getSelected');  
73.                 delUser();  
74.             }  
75.         }, {  
76.             text : "修改",  
77.             iconCls : "icon-edit",  
78.             handler : function() {  
79.                 updUser();  
80.             }  
81.         }, ]  
82.     });  
83. });  

三：结果展示：

1.主界面(含分页)

2.增加

3.删除

4.修改

5.查询(含分页)


四：总结

自认为代码写的比较乱，望需求人慢慢研究，有什么不足欢迎指正，下面我会再写一篇里面的具功能实现的介绍，比如分页，查询，数据回显等。