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方法。
ExtJs4 SpringMvc3 实现Grid 分页的更多相关文章
- dojo grid 分页
dojo很强大,也很方便,但是缺少文档,只能看源代码,也挺好的,就是费时间... 网上找了一段代码(找不到原出处了,不好意思),也看了dojo自带的demo,放一段可以执行的页面代码这里.把ip换成自 ...
- [转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
- ExtJS入门教程06,grid分页的实现
前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页. 数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就 ...
- extjs grid 分页
在使用extjs创建带分页功能的 grid 如下: 1.创建一个模型 // 创建算定义模型 模型名称 User Ext.define('User', { extend: 'Ext.data.Model ...
- Ext4.1 Grid 分页查询
转载:http://blog.csdn.net/zyujie/article/details/16362747 最近用Ext4.1自己做了做项目的练习:把一些知识点,在这里记录下来了! 上面一个for ...
- ExtJS4.2 Ext.grid.panel Store更改后刷新表格
//////////////////////// // Prepare store //////////////////////// // prepare fields and columns var ...
- Extjs grid分页多选记忆功能
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...
- extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据
最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...
随机推荐
- web项目中各种路径的获取HttpServletRequest
以工程名为/DemoWeb为例: 访问的jsp为:http://localhost:8080/DemoWeb/test/index.jsp 1 JSP中获得当前应用的相对路径和绝对路径 (1)得到工程 ...
- System.Web.UI.ScriptManager.RegisterStartupScript(语句末尾加分号,不然可能会造成语句不执行)
System.Web.UI.ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "testKey", &q ...
- 由登录服务器时ulimit配置报错,也谈下ulimit配置
最近在登录开发机时,有报错如下: -bash: cannot modify limit: Operation not permitted 一定是哪个地方有ulimit设置,想想看,用户登录或用户su命 ...
- vimium 使用心得
首先,建议记住chrom自己的支持的快捷键 https://support.google.com/chrome/answer/157179?hl=zh-Hans&hlrm=en-GB& ...
- poj1680 最短路判环
题意:有多个银行可以换钱,每个银行可以将特定的两种钱相互兑换,并且有自己的汇率,现在问是否可以将自己的钱通过银行兑换增加. 其实比较水,主要就是知道最短路问题里的负环可以通过bellman-fold或 ...
- 【HAOI2006】【BZOJ1051】【p1233】最受欢迎的牛
BZOJ难得的水题(其实是HA太弱了) 原题: 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B ...
- 【python2.7】raw_input()和input()区别及用法
版权声明:本文为博主原创文章,未经博主允许不得转载. 一.函数介绍1. input([prompt]) 等同于eval(raw_input([prompt])),这个函数不会捕捉用户输入上的错误,如果 ...
- Twsited异步网络框架
Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如:网络协议.线程.数据库管理.网络操作.电子邮件等. Twisted介绍:http://blog.csdn.net/hanhuili/a ...
- How to drop a PostgreSQL database if there are active connections to it?
1.PostgreSQL 9.1 and below: SELECT pg_terminate_backend(pg_stat_activity.procpid) FROM pg_stat_activ ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...