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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

科技小先锋 2017-11-15 22:47:00 浏览607
展开阅读全文

大家想想,上节中我们做的表格,如果有成千上万条的数据显示在表格里,然后滚动条查看数据,显然不是什么好办法,而且效率上也不允许。实际上,表格控件对性能的要求较高。在一个页面上放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,如需转载请自行联系原作者


网友评论

登录后评论
0/500
评论
科技小先锋
+ 关注