ExtJs4 SpringMvc3 实现Grid 分页
新建一个Maven webapp项目，webxml以及spring配置没什么需要注意的，不再赘述。
Maven依赖：（个人习惯，有用没用的都加上。。。）
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>zp.test</groupId> <artifactId>extjs</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>extjs Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.7</version> <scope>test</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>3.2.8.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>3.2.8.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>3.2.8.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>3.2.8.RELEASE</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.7.4</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>4.2.3.Final</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.6</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.6</version> </dependency> <dependency> <groupId>cglib</groupId> <artifactId>cglib-nodep</artifactId> <version>3.1</version> </dependency> <dependency> <groupId>commons-dbcp</groupId> <artifactId>commons-dbcp</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>javaee</groupId> <artifactId>javaee-api</artifactId> <version>5</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.18</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-lgpl</artifactId> <version>1.9.6</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.4</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.5</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-lgpl</artifactId> <version>1.9.6</version> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>1.7.1</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> </plugins> <finalName>extjs</finalName> </build> </project>
先从Extjs开始吧。
用Sencha Architect在项目的部署路径（webapp）中建立一个extjs4项目，我这里是webapp/grid。
可以参考：
http://blog.csdn.net/ibcve/article/details/8498768
http://blog.csdn.net/yunji3344/article/details/8521791
项目首页创建grid用的的js代码：
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
height: 327,
id: 'mygrid',
title: 'My Grid Panel',
store:
'persionStore'
, columns: [ { xtype: 'gridcolumn', dataIndex: 'id', text: 'ID' }, { xtype: 'gridcolumn', dataIndex: 'name', text: 'MyColumn1' }, { xtype: 'gridcolumn', dataIndex: 'coursename', text: 'MyColumn2' } ], dockedItems: [ { xtype: 'pagingtoolbar', dock: 'bottom', width: 360, displayInfo: true, store:'persionStore'
} ] }, { xtype: 'textareafield', height: 33, fieldLabel: '关键字', labelWidth: 60 }, { xtype: 'button', id: 'btnfind', text: '查找' }, { xtype: 'button', id: 'btndelete', text: '删除' }, { xtype: 'button', id: 'btnadd', text: '添加' } ] }); me.callParent(arguments); } });
model：
Ext.define('MyApp.model.persionModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'name'
},
{
name: 'coursename'
}
]
});
store：
Ext.define('MyApp.store.persionStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.persionModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.persionModel',
storeId: 'MyStore',
pageSize:
5
, proxy: { type: 'ajax', url:'../persionpage.do'
,
reader: {
type:
'json'
,
root:
'items'
,
totalProperty:
'totalCount'
}
}
}, cfg)]);
}
});
pageSize：每页数据的数量
url：springMvc中controller的映射地址
type：设置数据源格式为json
root：要填充进表格的数据的json属性名
totalProperty：总条数的json属性名
Grid的填充原理就是根据Stor中的url获取json数据，再提取json中的值填充grid。
Extjs部分完成，下面来看后台
建立好项目的entity（要和extjs的model对应，名称什么的都是写着玩的。。。）
package zp.test.json; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; import org.springframework.stereotype.Repository; @Repository @Entity @Table(name="persion") public class Persion { int id; String coursename; String name; @Id @Column(name="id") @GeneratedValue(strategy = GenerationType.AUTO) public int getId() { return id; } public void setId(int id) { this.id = id; } public String getCoursename() { return coursename; } public void setCoursename(String coursename) { this.coursename = coursename; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
DAO：
package zp.test.json; import java.util.List; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class PersionDao { @Autowired SessionFactory sessionFactory; public Session getSession(){ return sessionFactory.getCurrentSession(); } public List<Persion> findAll(){ String hql=" from Persion"; List<Persion> list=getSession().createQuery(hql).list(); return list; } public void save(Persion persion){ getSession().save(persion); } // public User findByName(String username){ // String hql="from Persion as u where u.username=?"; // Query query=getSession().createQuery(hql); // query.setString(0, username); // User user=(User)query.uniqueResult(); // return user; // } public int count(){ String hql3="select count(*) from Persion as p"; Long res=(Long)getSession().createQuery(hql3).uniqueResult(); int a=res.intValue(); return a; } public List<Persion> findAll(String start,String limit){ String hql2=" from Persion"; Query query=getSession().createQuery(hql2); query.setFirstResult(Integer.parseInt(start)); query.setMaxResults(Integer.parseInt(limit)); return query.list(); } }
Service:
package zp.test.json; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.google.gson.Gson; import com.google.gson.JsonArray; import com.google.gson.JsonElement; import com.google.gson.JsonObject; @Service public class PersionService { @Autowired PersionDao persionDao; public List<Persion> getAllPersion(){ List<Persion> list=persionDao.findAll(); return list; } public List<Persion> getAllPersion(String start,String limit){ List<Persion> list=persionDao.findAll(start,limit); return list; } public int getCount(){ return persionDao.count(); } //根据Extjs的请求参数获取分页数据 public String getPagePersionJson(String start,String limit){ List<Persion> list=this.getAllPersion(start, limit); return pageListToJson(list); } /** * 将获取的list数据转换成符合分页数据源格式的json串 * items为extjs store proxy reader中设置的root，填充表格的数据；totalCount为数据总数。 * @param list * @return */ private String pageListToJson(List<Persion> list){ JsonObject object=new JsonObject(); Gson gson=new Gson(); int count=this.getCount(); JsonElement jsonElement=gson.toJsonTree(list); //items为extjs store proxy reader中设置的root，即为数据源；totalCount为数据总数。 object.add("items", jsonElement); object.addProperty("totalCount", count); return object.toString(); } }
Controller:
package zp.test.json; import java.io.IOException; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.stereotype.Service; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.google.gson.Gson; import com.google.gson.JsonElement; import com.google.gson.JsonObject; import com.google.gson.JsonParser; @Controller public class PersionController { @Autowired PersionService persionService; /** * Extjs分页用的函数。start,limit 均为extjs grid传过来的请求参数。 * @param request * @param response * @return */ @RequestMapping("persionpage") @ResponseBody public String PersionPage(HttpServletRequest request,HttpServletResponse response){ String start=request.getParameter("start"); String limit=request.getParameter("limit"); return persionService.getPagePersionJson(start, limit); } }
controller 中@ResponseBody说明此controller不进行视图跳转，在这里的作用就是将数据库中的数据转换成Extjs需要的Json，让前端grid使用。
这时候就可以看出前面Extjs代码设置的root，totalProperty，url有什么用了。
url就是返回json的controller映射地址，totalProperty为数据总数，root就是纯粹的json格式的数据。
controller返回的不仅仅要有数据，还要有totalProperty。可以看看service中pageListToJson方法。