ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据

简介:

大家想想,上节中我们做的表格,如果有成千上万条的数据显示在表格里,然后滚动条查看数据,显然不是什么好办法,而且效率上也不允许。实际上,表格控件对性能的要求较高。在一个页面上放3个表格,就可以感觉到响应变慢。在表格里显示成千上万条数据,效率就可想而知了。
所以说分页是必不可少的,接下来我们就来看EXT提供的分页工具条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//创建表格
     var  grid =  new  Ext.grid.GridPanel({
         renderTo: 'grid' //渲染位置
         autoHeight: true ,
         store:store,
         columns:columns,  //显示列
         stripeRows: true //斑马线效果
         //enableColumnMove: false, //禁止拖放列
         //enableColumnResize: false, //禁止改变列宽度
         loadMask: true //显示遮罩和提示功能,即加载Loading……
         //forceFit:true //自动填满表格
         bbar: new  Ext.PagingToolbar({
             pageSize:10,  //每页显示几条数据
             store:store, 
             displayInfo: true //是否显示数据信息
             displayMsg: '显示第 {0} 条到 {1} 条记录,一共  {2} 条' //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据
             emptyMsg:  "没有记录"  //没有数据时显示信息
         })

得到以下的效果,本次我把界面又换了种黑色风格,如下:
5893591b426081ac24444e10a5c14032.jpg
上面的数据只是我简单的在页面静态定义的,但是咱们怎么通过Java后台传递这些数据呢?
我这里用了servlet技术简单处理下:
UserServices.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package  cn.com.shuyangyang.services;
                 
import  java.io.IOException;
                 
import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
                 
/**
  * 用户Servlet
  * <a href="http://home.51cto.com/index.php?s=/space/1269642" target="_blank">@author</a> shuYangYang
  * @email:shuyangyang@aliyun.com
  * @website:[url]www.shuyangyang.com.cn[/url]
  */
@SuppressWarnings ( "serial" )
public  class  UserServices  extends  HttpServlet {
                 
     <a href= "http://home.51cto.com/index.php?s=/space/5017954"  target= "_blank" > @Override </a>
     protected  void  doGet(HttpServletRequest req, HttpServletResponse resp)
             throws  ServletException, IOException {
         doPost(req,resp);
     }
                 
     <a href= "http://home.51cto.com/index.php?s=/space/5017954"  target= "_blank" > @Override </a>
     protected  void  doPost(HttpServletRequest req, HttpServletResponse resp)
             throws  ServletException, IOException {
         String start = req.getParameter( "start" );
         String limit = req.getParameter( "limit" );
                         
         try {
             int  index = Integer.parseInt(start);
             int  pageSize = Integer.parseInt(limit);
             System.out.println(index);
             System.out.println(pageSize);
                             
             String json =  "{total:100,root:[" ;
             for ( int  i = index;i<pageSize+index;i++){
                 json += "{id:" +i+ ",name:'name" +i+ "',descn:'desc" +i+ "'}" ;
                 if (i!=pageSize + index -  1 ){
                     json+= "," ;
                 }
             }
             json+= "]}" ;
             resp.getWriter().write(json);
         } catch (Exception e){
             e.printStackTrace();
         }
     }
                 
}

今晚正在装MySQL数据库,这里就不在数据库读取了,怕浪费时间,我在后台模拟对100条数据进行分页,在获得了start和limit之后生成JSON格式的数据。
获得的数据通过测试程序打印出来,如下:
{totalProperty:100,root:[
{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},
{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},
{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}
]}
请记住这个格式,不管你的后台是神马,是PHP还是C#等,只要满足了这样的格式要求,Ext就可以接受并处理,然后显示到表格中。简单看下JSON数据,totalProperty:100这里表示一共有100条数据。然后就是root:[],root对应着一个数组,数据里有10个对象,每个对象都有id,name和descn。这10条数据最后就应该显示到表格里。
我的servlet配置如下:

1
2
3
4
5
6
7
8
9
< servlet >
     < servlet-name >userService</ servlet-name >
     < servlet-class >cn.com.shuyangyang.services.UserServices</ servlet-class >
</ servlet >
            
< servlet-mapping >
     < servlet-name >userService</ servlet-name >
     < url-pattern >/userServlet</ url-pattern >
</ servlet-mapping >

接下来对表格的属性做下调整:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//定义列
var  columns = [
        {header: '编号' ,dataIndex: 'id' ,width:50},  //sortable:true 可设置是否为该列进行排序
        {header: '名称' ,dataIndex: 'name' ,width:80},
        {header: '描述' ,dataIndex: 'descn' ,width:112}
   ];
       
//转换原始数据为EXT可以显示的数据
var  store =  new  Ext.data.Store({
     proxy:{
         type: 'ajax' ,
         url: '/ExtJs4.2Pro/userServlet' ,
         reader:{
             type: 'json' ,
             totalProperty: 'total' ,
             root: 'root' ,
             idProperty: 'id'
         }
     },
     fields:[
        {name: 'id' },  //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
        {name: 'name' },
        {name: 'descn' },
        {name: 'status' }
     ]
});
       
       
//创建表格
var  grid =  new  Ext.grid.GridPanel({
     renderTo: 'grid' //渲染位置
     autoHeight: true ,
     store:store,
     width:550,
     columns:columns,  //显示列
     bbar: new  Ext.PagingToolbar({
         pageSize:25,  //每页显示几条数据
         store:store, 
         displayInfo: true //是否显示数据信息
         displayMsg: '显示第 {0} 条到 {1} 条记录,一共  {2} 条' //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据
         emptyMsg:  "没有记录"  //没有数据时显示信息
     })
});
       
//加载数据
store.load({params:{start:0,limit:25}});

OK,大功告成,看下效果:
34bd28610efe03d83f9b2c73f62cd640.jpg
在这里我发现了个问题,尽管我在前台设置了pageSize为10或者其他数值,但是最终的结果总是第一页显示你设置的条数,第二页就有问题了,暂时还不知道什么原因。知道的麻烦告诉我下。


本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1332885,如需转载请自行联系原作者


相关文章
|
5月前
|
前端开发 JavaScript 数据库
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
|
7月前
|
前端开发 JavaScript
vue实现通用分页控件,支持前端分页、后端分页。
vue实现通用分页控件,支持前端分页、后端分页。
91 1
|
SQL Oracle 关系型数据库
什么是分页?如何使用分页?(一)
什么是分页?如何使用分页?
175 0
|
JavaScript 数据库 UED
Vue 的动态菜单表格数据展示以及分页查询实现
Vue 的动态菜单表格数据展示以及分页查询实现
149 0
|
数据管理 PHP 容器
layui框架实战案例(2):LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)
layui框架实战案例(2):LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)
511 0
|
SQL 存储 关系型数据库
什么是分页?如何使用分页?(二)
什么是分页?如何使用分页?
75 0
|
JavaScript 测试技术
Easyui datagrid 修改分页组件的分页提示信息为中文
Easyui datagrid 修改分页组件的分页提示信息为中文
94 0
|
资源调度 前端开发
让后台查询+表格这种页面更加快速和简便
让后台查询+表格这种页面更加快速和简便
155 0