新建一个Maven webapp项目,webxml以及spring配置没什么需要注意的,不再赘述。

Maven依赖:(个人习惯,有用没用的都加上。。。)

  1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  2. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  3. <modelVersion>4.0.0</modelVersion>
  4. <groupId>zp.test</groupId>
  5. <artifactId>extjs</artifactId>
  6. <packaging>war</packaging>
  7. <version>0.0.1-SNAPSHOT</version>
  8. <name>extjs Maven Webapp</name>
  9. <url>http://maven.apache.org</url>
  10. <dependencies>
  11. <dependency>
  12. <groupId>junit</groupId>
  13. <artifactId>junit</artifactId>
  14. <version>4.7</version>
  15. <scope>test</scope>
  16. </dependency>
  17. <dependency>
  18. <groupId>jstl</groupId>
  19. <artifactId>jstl</artifactId>
  20. <version>1.2</version>
  21. </dependency>
  22.  
  23. <dependency>
  24. <groupId>taglibs</groupId>
  25. <artifactId>standard</artifactId>
  26. <version>1.1.2</version>
  27. </dependency>
  28.  
  29. <dependency>
  30. <groupId>org.springframework</groupId>
  31. <artifactId>spring-web</artifactId>
  32. <version>3.2.8.RELEASE</version>
  33. </dependency>
  34. <dependency>
  35. <groupId>org.springframework</groupId>
  36. <artifactId>spring-webmvc</artifactId>
  37. <version>3.2.8.RELEASE</version>
  38. </dependency>
  39. <dependency>
  40. <groupId>org.springframework</groupId>
  41. <artifactId>spring-aspects</artifactId>
  42. <version>3.2.8.RELEASE</version>
  43. </dependency>
  44. <dependency>
  45. <groupId>org.springframework</groupId>
  46. <artifactId>spring-orm</artifactId>
  47. <version>3.2.8.RELEASE</version>
  48. </dependency>
  49. <dependency>
  50. <groupId>org.aspectj</groupId>
  51. <artifactId>aspectjweaver</artifactId>
  52. <version>1.7.4</version>
  53. </dependency>
  54.  
  55. <dependency>
  56. <groupId>org.hibernate</groupId>
  57. <artifactId>hibernate-core</artifactId>
  58. <version>4.2.3.Final</version>
  59. </dependency>
  60.  
  61. <dependency>
  62. <groupId>commons-pool</groupId>
  63. <artifactId>commons-pool</artifactId>
  64. <version>1.6</version>
  65. </dependency>
  66.  
  67. <dependency>
  68. <groupId>c3p0</groupId>
  69. <artifactId>c3p0</artifactId>
  70. <version>0.9.1</version>
  71. </dependency>
  72.  
  73. <dependency>
  74. <groupId>commons-pool</groupId>
  75. <artifactId>commons-pool</artifactId>
  76. <version>1.6</version>
  77. </dependency>
  78. <dependency>
  79. <groupId>cglib</groupId>
  80. <artifactId>cglib-nodep</artifactId>
  81. <version>3.1</version>
  82. </dependency>
  83.  
  84. <dependency>
  85. <groupId>commons-dbcp</groupId>
  86. <artifactId>commons-dbcp</artifactId>
  87. <version>1.4</version>
  88. </dependency>
  89. <dependency>
  90. <groupId>javaee</groupId>
  91. <artifactId>javaee-api</artifactId>
  92. <version>5</version>
  93. </dependency>
  94. <dependency>
  95. <groupId>mysql</groupId>
  96. <artifactId>mysql-connector-java</artifactId>
  97. <version>5.1.18</version>
  98. </dependency>
  99. <dependency>
  100. <groupId>org.codehaus.jackson</groupId>
  101. <artifactId>jackson-core-lgpl</artifactId>
  102. <version>1.9.6</version>
  103. </dependency>
  104. <dependency>
  105. <groupId>org.codehaus.jackson</groupId>
  106. <artifactId>jackson-core-asl</artifactId>
  107. <version>1.9.4</version>
  108. </dependency>
  109. <dependency>
  110. <groupId>org.codehaus.jackson</groupId>
  111. <artifactId>jackson-mapper-asl</artifactId>
  112. <version>1.9.5</version>
  113. </dependency>
  114. <dependency>
  115. <groupId>org.codehaus.jackson</groupId>
  116. <artifactId>jackson-mapper-lgpl</artifactId>
  117. <version>1.9.6</version>
  118. </dependency>
  119. <dependency>
  120. <groupId>com.google.code.gson</groupId>
  121. <artifactId>gson</artifactId>
  122. <version>1.7.1</version>
  123. </dependency>
  124. </dependencies>
  125. <build>
  126. <plugins>
  127. <plugin>
  128. <groupId>org.apache.maven.plugins</groupId>
  129. <artifactId>maven-compiler-plugin</artifactId>
  130. <configuration>
  131. <source>1.6</source>
  132. <target>1.6</target>
  133. </configuration>
  134. </plugin>
  135. </plugins>
  136. <finalName>extjs</finalName>
  137. </build>
  138. </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代码:

  1. Ext.define('MyApp.view.MyViewport', {
  2. extend: 'Ext.container.Viewport',
  3.  
  4. initComponent: function() {
  5. var me = this;
  6.  
  7. Ext.applyIf(me, {
  8. items: [
  9. {
  10. xtype: 'gridpanel',
  11. height: 327,
  12. id: 'mygrid',
  13. title: 'My Grid Panel',
  14. store:

'persionStore'

  1. ,
  2. columns: [
  3. {
  4. xtype: 'gridcolumn',
  5. dataIndex: 'id',
  6. text: 'ID'
  7. },
  8. {
  9. xtype: 'gridcolumn',
  10. dataIndex: 'name',
  11. text: 'MyColumn1'
  12. },
  13. {
  14. xtype: 'gridcolumn',
  15. dataIndex: 'coursename',
  16. text: 'MyColumn2'
  17. }
  18. ],
  19. dockedItems: [
  20. {
  21. xtype: 'pagingtoolbar',
  22. dock: 'bottom',
  23. width: 360,
  24. displayInfo: true,
  25. store:

'persionStore'

  1. }
  2. ]
  3. },
  4. {
  5. xtype: 'textareafield',
  6. height: 33,
  7. fieldLabel: '关键字',
  8. labelWidth: 60
  9. },
  10. {
  11. xtype: 'button',
  12. id: 'btnfind',
  13. text: '查找'
  14. },
  15. {
  16. xtype: 'button',
  17. id: 'btndelete',
  18. text: '删除'
  19. },
  20. {
  21. xtype: 'button',
  22. id: 'btnadd',
  23. text: '添加'
  24. }
  25. ]
  26. });
  27.  
  28. me.callParent(arguments);
  29. }
  30.  
  31. });

model:

  1. Ext.define('MyApp.model.persionModel', {
  2. extend: 'Ext.data.Model',
  3.  
  4. fields: [
  5. {
  6. name: 'id'
  7. },
  8. {
  9. name: 'name'
  10. },
  11. {
  12. name: 'coursename'
  13. }
  14. ]
  15. });

store:

  1. Ext.define('MyApp.store.persionStore', {
  2. extend: 'Ext.data.Store',
  3.  
  4. requires: [
  5. 'MyApp.model.persionModel'
  6. ],
  7.  
  8. constructor: function(cfg) {
  9. var me = this;
  10. cfg = cfg || {};
  11. me.callParent([Ext.apply({
  12. autoLoad: true,
  13. autoSync: true,
  14. model: 'MyApp.model.persionModel',
  15. storeId: 'MyStore',
  16. pageSize:

5

  1. ,
  2. proxy: {
  3. type: 'ajax',
  4. url:

'../persionpage.do'

  1. ,
  2. reader: {
  3. type:

'json'

  1. ,
  2. root:

'items'

  1. ,
  2. totalProperty:

'totalCount'

  1. }
  2. }
  3. }, cfg)]);
  4. }
  5. });

pageSize:每页数据的数量

url:springMvc中controller的映射地址

type:设置数据源格式为json

root:要填充进表格的数据的json属性名

totalProperty:总条数的json属性名

Grid的填充原理就是根据Stor中的url获取json数据,再提取json中的值填充grid。

Extjs部分完成,下面来看后台

建立好项目的entity(要和extjs的model对应,名称什么的都是写着玩的。。。)

  1. package zp.test.json;
  2.  
  3. import javax.persistence.Column;
  4. import javax.persistence.Entity;
  5. import javax.persistence.GeneratedValue;
  6. import javax.persistence.GenerationType;
  7. import javax.persistence.Id;
  8. import javax.persistence.Table;
  9.  
  10. import org.springframework.stereotype.Repository;
  11.  
  12. @Repository
  13. @Entity
  14. @Table(name="persion")
  15. public class Persion {
  16. int id;
  17. String coursename;
  18. String name;
  19.  
  20. @Id
  21. @Column(name="id")
  22. @GeneratedValue(strategy = GenerationType.AUTO)
  23. public int getId() {
  24. return id;
  25. }
  26. public void setId(int id) {
  27. this.id = id;
  28. }
  29. public String getCoursename() {
  30. return coursename;
  31. }
  32. public void setCoursename(String coursename) {
  33. this.coursename = coursename;
  34. }
  35. public String getName() {
  36. return name;
  37. }
  38. public void setName(String name) {
  39. this.name = name;
  40. }
  41.  
  42. }

DAO:

  1. package zp.test.json;
  2.  
  3. import java.util.List;
  4.  
  5. import org.hibernate.Query;
  6. import org.hibernate.Session;
  7. import org.hibernate.SessionFactory;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Component;
  10.  
  11. @Component
  12. public class PersionDao {
  13. @Autowired
  14. SessionFactory sessionFactory;
  15.  
  16. public Session getSession(){
  17. return sessionFactory.getCurrentSession();
  18. }
  19. public List<Persion> findAll(){
  20. String hql=" from Persion";
  21. List<Persion> list=getSession().createQuery(hql).list();
  22. return list;
  23. }
  24.  
  25. public void save(Persion persion){
  26. getSession().save(persion);
  27. }
  28. // public User findByName(String username){
  29. // String hql="from Persion as u where u.username=?";
  30. // Query query=getSession().createQuery(hql);
  31. // query.setString(0, username);
  32. // User user=(User)query.uniqueResult();
  33. // return user;
  34. // }
  35. public int count(){
  36. String hql3="select count(*) from Persion as p";
  37. Long res=(Long)getSession().createQuery(hql3).uniqueResult();
  38. int a=res.intValue();
  39. return a;
  40. }
  41.  
  42. public List<Persion> findAll(String start,String limit){
  43. String hql2=" from Persion";
  44. Query query=getSession().createQuery(hql2);
  45. query.setFirstResult(Integer.parseInt(start));
  46. query.setMaxResults(Integer.parseInt(limit));
  47. return query.list();
  48. }
  49. }

Service:

  1. package zp.test.json;
  2.  
  3. import java.util.List;
  4.  
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  7.  
  8. import com.google.gson.Gson;
  9. import com.google.gson.JsonArray;
  10. import com.google.gson.JsonElement;
  11. import com.google.gson.JsonObject;
  12.  
  13. @Service
  14. public class PersionService {
  15. @Autowired
  16. PersionDao persionDao;
  17. public List<Persion> getAllPersion(){
  18. List<Persion> list=persionDao.findAll();
  19. return list;
  20. }
  21. public List<Persion> getAllPersion(String start,String limit){
  22. List<Persion> list=persionDao.findAll(start,limit);
  23. return list;
  24. }
  25.  
  26. public int getCount(){
  27. return persionDao.count();
  28. }
  29.  
  30. //根据Extjs的请求参数获取分页数据
  31. public String getPagePersionJson(String start,String limit){
  32. List<Persion> list=this.getAllPersion(start, limit);
  33. return pageListToJson(list);
  34. }
  35.  
  36. /**
  37. * 将获取的list数据转换成符合分页数据源格式的json串
  38. * items为extjs store proxy reader中设置的root,填充表格的数据;totalCount为数据总数。
  39. * @param list
  40. * @return
  41. */
  42. private String pageListToJson(List<Persion> list){
  43.  
  44. JsonObject object=new JsonObject();
  45. Gson gson=new Gson();
  46. int count=this.getCount();
  47. JsonElement jsonElement=gson.toJsonTree(list);
  48. //items为extjs store proxy reader中设置的root,即为数据源;totalCount为数据总数。
  49. object.add("items", jsonElement);
  50. object.addProperty("totalCount", count);
  51. return object.toString();
  52. }
  53.  
  54. }

Controller:

  1. package zp.test.json;
  2.  
  3. import java.io.IOException;
  4. import java.util.List;
  5.  
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8.  
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.stereotype.Controller;
  11. import org.springframework.stereotype.Service;
  12. import org.springframework.web.bind.annotation.RequestBody;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.ResponseBody;
  15.  
  16. import com.google.gson.Gson;
  17. import com.google.gson.JsonElement;
  18. import com.google.gson.JsonObject;
  19. import com.google.gson.JsonParser;
  20.  
  21. @Controller
  22. public class PersionController {
  23.  
  24. @Autowired
  25. PersionService persionService;
  26.  
  27. /**
  28. * Extjs分页用的函数。start,limit 均为extjs grid传过来的请求参数。
  29. * @param request
  30. * @param response
  31. * @return
  32. */
  33. @RequestMapping("persionpage")
  34. @ResponseBody
  35. public String PersionPage(HttpServletRequest request,HttpServletResponse response){
  36. String start=request.getParameter("start");
  37. String limit=request.getParameter("limit");
  38. return persionService.getPagePersionJson(start, limit);
  39.  
  40. }
  41.  
  42. }

controller 中@ResponseBody说明此controller不进行视图跳转,在这里的作用就是将数据库中的数据转换成Extjs需要的Json,让前端grid使用。

这时候就可以看出前面Extjs代码设置的root,totalProperty,url有什么用了。

url就是返回json的controller映射地址,totalProperty为数据总数,root就是纯粹的json格式的数据。

controller返回的不仅仅要有数据,还要有totalProperty。可以看看service中pageListToJson方法。

ExtJs4 SpringMvc3 实现Grid 分页的更多相关文章

  1. dojo grid 分页

    dojo很强大,也很方便,但是缺少文档,只能看源代码,也挺好的,就是费时间... 网上找了一段代码(找不到原出处了,不好意思),也看了dojo自带的demo,放一段可以执行的页面代码这里.把ip换成自 ...

  2. [转]ExtJS Grid 分页时保持选中的简单实现方法

    原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...

  3. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  4. ExtJS入门教程06,grid分页的实现

    前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页. 数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就 ...

  5. extjs grid 分页

    在使用extjs创建带分页功能的 grid 如下: 1.创建一个模型 // 创建算定义模型 模型名称 User Ext.define('User', { extend: 'Ext.data.Model ...

  6. Ext4.1 Grid 分页查询

    转载:http://blog.csdn.net/zyujie/article/details/16362747 最近用Ext4.1自己做了做项目的练习:把一些知识点,在这里记录下来了! 上面一个for ...

  7. ExtJS4.2 Ext.grid.panel Store更改后刷新表格

    //////////////////////// // Prepare store //////////////////////// // prepare fields and columns var ...

  8. Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...

  9. extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据

    最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...

随机推荐

  1. web项目中各种路径的获取HttpServletRequest

    以工程名为/DemoWeb为例: 访问的jsp为:http://localhost:8080/DemoWeb/test/index.jsp 1 JSP中获得当前应用的相对路径和绝对路径 (1)得到工程 ...

  2. System.Web.UI.ScriptManager.RegisterStartupScript(语句末尾加分号,不然可能会造成语句不执行)

    System.Web.UI.ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "testKey", &q ...

  3. 由登录服务器时ulimit配置报错,也谈下ulimit配置

    最近在登录开发机时,有报错如下: -bash: cannot modify limit: Operation not permitted 一定是哪个地方有ulimit设置,想想看,用户登录或用户su命 ...

  4. vimium 使用心得

    首先,建议记住chrom自己的支持的快捷键 https://support.google.com/chrome/answer/157179?hl=zh-Hans&hlrm=en-GB& ...

  5. poj1680 最短路判环

    题意:有多个银行可以换钱,每个银行可以将特定的两种钱相互兑换,并且有自己的汇率,现在问是否可以将自己的钱通过银行兑换增加. 其实比较水,主要就是知道最短路问题里的负环可以通过bellman-fold或 ...

  6. 【HAOI2006】【BZOJ1051】【p1233】最受欢迎的牛

    BZOJ难得的水题(其实是HA太弱了) 原题: 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B ...

  7. 【python2.7】raw_input()和input()区别及用法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.函数介绍1. input([prompt]) 等同于eval(raw_input([prompt])),这个函数不会捕捉用户输入上的错误,如果 ...

  8. Twsited异步网络框架

    Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如:网络协议.线程.数据库管理.网络操作.电子邮件等. Twisted介绍:http://blog.csdn.net/hanhuili/a ...

  9. 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 ...

  10. js调用百度地图API创建地图,搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...