[置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

 ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3

实现分页查询

1.demo简介

       这是一个由ExtJs4.2,Mysql5.5 ,Struts2,Hibernate3.3构成的简单web项目,本人由于最近在研究ExtJs所以特意做了这个Demo,方便有需要的同学查看,也给自己留下学习笔记吧。需要特别说明我这里并没有整合Struts,Hibernate,这两个工具是独立运行的。转载请注明:http://blog.csdn.net/qiuzhping/article/details/41739017

1.1 项目目录结构:

[置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第1张图片

1.2 struts.xml配置文件内容

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<include file="struts-default.xml" />
    <package name="json" namespace="/" extends="json-default">
    	<action name="JobData" class="com.qiuzhping.report.action.GetJobDataAction">
    		<result type="json" />
    	</action>
    </package>
</struts>

1.3 hibernate.cfg.xml配置文件内容

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
          "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
          "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<!-- Generated by MyEclipse Hibernate Tools.                   -->
<hibernate-configuration>

	<session-factory>
		<property name="dialect">
			org.hibernate.dialect.MySQLDialect
		</property>
		<property name="connection.url">
			jdbc:mysql://localhost:3306/devDB
		</property>
		<property name="connection.username">root</property>
		<property name="connection.password">1234</property>
		<property name="connection.driver_class">
			com.mysql.jdbc.Driver
		</property>
		<property name="myeclipse.connection.profile">
			mysqlConn
		</property>
		<mapping resource="com/qiuzhping/report/domian/Job.hbm.xml" />
		<mapping resource="com/qiuzhping/report/domian/Sex.hbm.xml" />
		<mapping
			resource="com/qiuzhping/report/domian/Department.hbm.xml" />

	</session-factory>

</hibernate-configuration>

1.4 web.xml配置文件内容

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
	  <welcome-file-list>
	    <welcome-file>index.jsp</welcome-file>
	  </welcome-file-list>
</web-app>



2.核心代码展示

2.1 Mysql 分页查询语句

public List<Job> getData(int start,int end,Class clazz){
		Session session = hsf.getSessionFactory().openSession();
		StringBuffer sql = new StringBuffer("SELECT * FROM job LIMIT "+start+","+end);
		SQLQuery query =session.createSQLQuery(sql.toString());
		query.addEntity(clazz);
		return query.list();
	}


2.2 统计总体数量查询语句

public BigDecimal getTotalCount(Class clazz){
		Session session = hsf.getSessionFactory().openSession();
		StringBuffer sql = new StringBuffer("SELECT * FROM job ");
		SQLQuery query =session.createSQLQuery(sql.toString());
		query.addEntity(clazz);
		return new BigDecimal(query.list().size());
	}

2.3 jobenquiry.js内容

var itemsPerPage = 20;
var params;
var store = Ext.create('Ext.data.Store',{
		fields:["id","firstName","lastName","loginName","telephone","brithday","sexId","depId"],
		proxy:{
			type:'ajax',
			url:'/demo/JobData.action',
			reader:{
				type:'json',
				root:'rootData',
				totalProperty: 'totalCount'
			}
		},
		pageSize: itemsPerPage,
		autoLoad:true	
});
Ext.onReady(function(){
	Ext.Loader.setConfig({
		enabled:true
	});
	Ext.create('Ext.grid.Panel',{
		title:'Job Enquiry',
		width:'100%',
		layout:"auto",
		style:"margin-left:auto;margin-right:auto;",
		renderTo:Ext.getBody(),
		columns:[{
				header:'Id',
				flex: 1,align:"center", 
				dataIndex:'id',
				sortable:true
			},{
				header : "First Name",  
				flex: 1, align:"center", 
                dataIndex : 'firstName',  
                sortable : true  
			}, {  
                header : "Last Name",  
                flex: 1,  align:"center",
                dataIndex : 'lastName',  
                sortable : true  
            }, {  
                header : "Login Name",  
                flex: 1, 
				align:"center",
                dataIndex : 'loginName',  
                sortable : true  
            }, {  
                header : "Telephone",  
                flex: 1,align:"center",
                hideable: false,
                dataIndex : 'telephone',  
                sortable : true  
            }, {  
                header : "brithday",  
                flex: 1, align:"center", 
                dataIndex : 'brithday',
                sortable : true  
            }, {  
                header : "Sex Id",  
                flex: 1, align:"center", 
                dataIndex : 'sexId',  
                sortable : true  
            }, {  
                header : "Dep Id",  
                flex: 1,  align:"center", 
                dataIndex : 'depId',  
                sortable : true  
            }],
		store:store,
		//style:"margin-left:auto;margin-right:auto;align:center", 
		pageSize: itemsPerPage,
		dockedItems: [{
	        xtype: 'pagingtoolbar',
	        store: store,
	        dock: 'bottom',
	        displayInfo: true
	    }]
	});
	store.load({params:{start:0,limit:itemsPerPage}});
	var startTime;
	var endTime;
	function checkDate(){
		startTime = Ext.getCmp("startTime");
		endTime = Ext.getCmp("endTime");
		if(startTime != null && endTime != null && startTime.getValue() > endTime.getValue()){
			alert("Start time must be smaller than the end time!");
			return false;
		}
		return true;
	}
	function query(){
		//check date 
		if(!checkDate()){
			return ;
		}
		params = {
			'conEnquiryTicketVo.startTime':startTime.getValue(),
			'conEnquiryTicketVo.endTime':endTime.getValue(),
			start:0,
			limit:itemsPerPage
		};
//		store.on('beforeload',function(){
//			var startTime = Ext.getCmp("startTime");
//			var endTime = Ext.getCmp("endTime");
//			//alert("click!!"+startTime.getValue());
//			params = {
//				'conEnquiryTicketVo.startTime':startTime.getValue(),
//				'conEnquiryTicketVo.endTime':endTime.getValue(),
//				start:0,
//				limit:itemsPerPage
//			};
//		});
		store.load({params:params});
	}
});

2.4 GetJobDataAction内容

package com.qiuzhping.report.action;

import java.math.BigDecimal;
import java.util.List;

import org.apache.log4j.Logger;

import com.opensymphony.xwork2.ActionSupport;
import com.qiuzhping.report.dao.impl.DepartmentDaoImpl;
import com.qiuzhping.report.domian.Job;

/**
 * <Description functions in a word>
 * <Detail description>
 * 
 * @author  Qiuzhenping
 * @version  [Version NO, 2014-12-5]
 * @see  [Related classes/methods]
 * @since  [product/module version]
 */
public class GetJobDataAction extends ActionSupport{
	/**
	 *serialVersionUID
	 */
	private static final long serialVersionUID = 3288957476157165689L;
	private Logger log = Logger.getLogger(this.getClass());
	private BigDecimal totalCount;
	private List rootData;
	private int start;
	private int limit;
	
	public BigDecimal getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(BigDecimal totalCount) {
		this.totalCount = totalCount;
	}
	public List getRootData() {
		return rootData;
	}
	public void setRootData(List rootData) {
		this.rootData = rootData;
	}
	
	public int getStart() {
		return start;
	}
	public void setStart(int start) {
		this.start = start;
	}
	public int getLimit() {
		return limit;
	}
	public void setLimit(int limit) {
		this.limit = limit;
	}
	
	@Override
	public String execute(){
		try {
			DepartmentDaoImpl ddi = new DepartmentDaoImpl();
			log.info("start = "+start);
			log.info("limit = "+limit);
			int end = start+limit;
			log.info("end = "+end);
			totalCount = ddi.getTotalCount(Job.class);
			rootData  = ddi.getData(start, limit,Job.class);
		} catch (Exception e) {
			log.error(e);
		}
		return SUCCESS;
	}
}

3.效果图

[置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第2张图片

[置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第3张图片


4.源代码(除开Ext库,libs文件)

       ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询
       1.libs目录缺少hibernate核心jar包

       [置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第4张图片
       2.libs目录缺少struts jar

      [置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第5张图片
       3.WebRoot目录缺少ExtJs4.2核心类库

      [置顶] ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询_第6张图片
       以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不允许上传,而且也很容易找到,只要按照我在项目内提示的内容去增加这些依赖文件这个项目就能  正常运行。

       ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 : http://download.csdn.net/detail/qiu_11/8226457


ExtJs4.2序列笔记

ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

ExtJs4.2应用:使用ExtJs扩展组件searchfield实现数据搜索功能



你可能感兴趣的:(java,Ajax,struts,分页,extjs4)