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



 大家想想,上节中我们做的表格,如果有成千上万条的数据显示在表格里,然后滚动条查看数据,显然不是什么好办法,而且效率上也不允许。实际上,表格控件对性能的要求较高。在一个页面上放3个表格,就可以感觉到响应变慢。在表格里显示成千上万条数据,效率就可想而知了。iQY思考者日记网-束洋洋个人博客

所以说分页是必不可少的,接下来我们就来看EXT提供的分页工具条。iQY思考者日记网-束洋洋个人博客

//创建表格  
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: "没有记录" //没有数据时显示信息  
}) 

 iQY思考者日记网-束洋洋个人博客

得到以下的效果,本次我把界面又换了种黑色风格,如下:iQY思考者日记网-束洋洋个人博客

QQ截图20131112003234.jpgiQY思考者日记网-束洋洋个人博客

上面的数据只是我简单的在页面静态定义的,但是咱们怎么通过Java后台传递这些数据呢?iQY思考者日记网-束洋洋个人博客

我这里用了servlet技术简单处理下:iQY思考者日记网-束洋洋个人博客

UserServices.javaiQY思考者日记网-束洋洋个人博客

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 
 * @author shuYangYang 
 * @email:shuyangyang@aliyun.com 
 * @website:www.shuyangyang.com.cn 
 */  
@SuppressWarnings("serial")  
public class UserServices extends HttpServlet {  
  
    @Override  
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        doPost(req,resp);  
    }  
  
    @Override  
    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();  
        }  
    }  
  
}

 iQY思考者日记网-束洋洋个人博客

今晚正在装MySQL数据库,这里就不在数据库读取了,怕浪费时间,我在后台模拟对100条数据进行分页,在获得了start和limit之后生成JSON格式的数据。iQY思考者日记网-束洋洋个人博客

获得的数据通过测试程序打印出来,如下:iQY思考者日记网-束洋洋个人博客

{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'}

]}

 iQY思考者日记网-束洋洋个人博客

请记住这个格式,不管你的后台是神马,是PHP还是C#等,只要满足了这样的格式要求,Ext就可以接受并处理,然后显示到表格中。简单看下JSON数据,totalProperty:100这里表示一共有100条数据。然后就是root:[],root对应着一个数组,数据里有10个对象,每个对象都有id,name和descn。这10条数据最后就应该显示到表格里。

我的servlet配置如下:iQY思考者日记网-束洋洋个人博客

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

 iQY思考者日记网-束洋洋个人博客

接下来对表格的属性做下调整:iQY思考者日记网-束洋洋个人博客

//定义列  
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}});

 iQY思考者日记网-束洋洋个人博客

OK,大功告成,看下效果:iQY思考者日记网-束洋洋个人博客

2.jpgiQY思考者日记网-束洋洋个人博客

在这里我发现了个问题,尽管我在前台设置了pageSize为10或者其他数值,但是最终的结果总是第一页显示你设置的条数,第二页就有问题了,暂时还不知道什么原因。知道的麻烦告诉我下。iQY思考者日记网-束洋洋个人博客

 iQY思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridiQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridiQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingiQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格iQY思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldiQY思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件iQY思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditoriQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 iQY思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解iQY思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目iQY思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈