Ext Grid后台分页完整示例

功能需求：

首先，可以选择新闻类型，选择了新闻类型后，点击刷新按钮，即可显示相应类型下的新闻。

其次，每页显示1条新闻，分页显示。

实现的具体步骤如下：

首先，你得查数据库吧，我专门写了个SQL Helper方法，用于查数据库和将查询结果拼接成为json串。

代码如下：

[java]  view plain copy

1. package com.business.hr.control;  
2. import java.sql.*;  
3. import java.util.*;  
4. import com.business.hr.dao.HbutHrNews;  
5. /* 
6.  * author:Tammy Pi 
7.  * function:专门为Ext2.0写的后台分页代码 
8.  */  
9. public class SqlHelper {  
10.   
11.     private static Connection conn = null;  
12.       
13.     public static Connection getConnection() {  
14.           
15.         String driverManager = "oracle.jdbc.driver.OracleDriver";  
16.         String url = "jdbc:oracle:thin:@localhost:1521:orcl";  
17.         String username = "hbut_hr";  
18.         String password = "hbut_hr";  
19.           
20.         try {  
21.             Class.forName(driverManager);  
22.             conn = DriverManager.getConnection(url,username,password);  
23.         } catch (Exception e) {  
24.             // TODO Auto-generated catch block  
25.             e.printStackTrace();  
26.         }  
27.           
28.         return conn;  
29.     }  
30.       
31.     public static int getNum(String xwlx) {  
32.           
33.         String sql1 = "select count(xw_id) from hbut_hr_news where xw_lx='"+xwlx+"'";  
34.         Connection conn = getConnection();  
35.         int num = 0;  
36.           
37.         if(conn != null) {  
38.               
39.             ResultSet rs1 = null;  
40.             Statement stm1 = null;  
41.               
42.             try {  
43.                 stm1 = conn.createStatement();  
44.                 rs1 = stm1.executeQuery(sql1);  
45.                   
46.                 if(rs1!=null&&rs1.next()) {  
47.                       
48.                     num = rs1.getInt(1);  
49.                 }  
50.                   
51.             } catch (Exception e) {  
52.                 // TODO Auto-generated catch block  
53.                 e.printStackTrace();  
54.             } finally{  
55.                   
56.                   if(rs1 != null) {  
57.                           
58.                         try {  
59.                             rs1.close();  
60.                         } catch (SQLException e) {  
61.                             // TODO Auto-generated catch block  
62.                             e.printStackTrace();  
63.                         }  
64.                     }  
65.                     if(stm1 != null) {  
66.                           
67.                         try {  
68.                             stm1.close();  
69.                         } catch (SQLException e) {  
70.                             // TODO Auto-generated catch block  
71.                             e.printStackTrace();  
72.                         }  
73.                     }  
74.                     if(conn != null) {  
75.                           
76.                         try {  
77.                             conn.close();  
78.                         } catch (SQLException e) {  
79.                             // TODO Auto-generated catch block  
80.                             e.printStackTrace();  
81.                         }  
82.                     }  
83.             }  
84.         }  
85.         return num;  
86.     }  
87.     public static String readXw(String xwlx,int firstRow,int maxRow) {  
88.           
89.         String sql = "select * from (select xw_id,xw_bt,xw_zz,xw_sj,xw_ly,xw_lx,ext1,rownum as num from hbut_hr_news where xw_lx='"+xwlx+"' and rownum<="+firstRow+maxRow+") temp where num>"+firstRow;  
90.           
91.         Connection conn = getConnection();  
92.         int num = getNum(xwlx);  
93.           
94.         if(conn != null) {  
95.               
96.             Statement stm = null;  
97.             ResultSet rs = null;  
98.           
99.             StringBuffer sb = new StringBuffer();  
100.             List<HbutHrNews> list =new ArrayList<HbutHrNews>();  
101.               
102.             try {  
103.                 stm = conn.createStatement();  
104.                 rs = stm.executeQuery(sql);  
105.                   
106.                   
107.                   
108.                 while(rs != null && rs.next()) {  
109.                       
110.                     HbutHrNews temp = new HbutHrNews();  
111.                       
112.                     temp.setXwId(rs.getString("xw_id"));  
113.                     temp.setXwBt(rs.getString("xw_bt"));  
114.                     temp.setXwZz(rs.getString("xw_zz"));  
115.                     temp.setXwSj(rs.getDate("xw_sj"));  
116.                     temp.setXwLy(rs.getString("xw_ly"));  
117.                     temp.setXwLx(rs.getString("xw_lx"));  
118.                     temp.setExt1(rs.getString("ext1"));  
119.                       
120.                     list.add(temp);  
121.                 }  
122.                   
123.                 //拼接json串  
124.                 if(list != null) {  
125.                       
126.                     //拼接Json串  
127.                     sb.append("{totalProperty:"+num+",root:[");  
128.                       
129.                     for(int i=0;i<list.size();i++) {  
130.                           
131.                         HbutHrNews temp = list.get(i);  
132.                         sb.append("{xwid:'"+temp.getXwId()+"',");  
133.                         sb.append("xwbt:'"+temp.getXwBt()+"',");  
134.                         sb.append("xwzz:'"+temp.getXwZz()+"',");  
135.                         sb.append("fbsj:'"+temp.getXwSj()+"',");  
136.                         sb.append("ly:'"+temp.getXwLy()+"',");  
137.                         sb.append("lx:'"+temp.getXwLx()+"',");  
138.                         sb.append("zt:'"+(temp.getExt1().equals("1")?"发布":"草稿")+"'}");  
139.                           
140.                         if(i!=list.size()-1) {  
141.                               
142.                             sb.append(",");  
143.                         }  
144.                     }  
145.                       
146.                     sb.append("]}");  
147.                 }  
148.                   
149.                 System.out.println("json串为：" + sb.toString());  
150.                 return sb.toString();  
151.             } catch (SQLException e) {  
152.                 // TODO Auto-generated catch block  
153.                 System.out.println(e.getMessage());  
154.             }finally {  
155.                   
156.                 if(rs != null) {  
157.                       
158.                     try {  
159.                         rs.close();  
160.                     } catch (SQLException e) {  
161.                         // TODO Auto-generated catch block  
162.                         e.printStackTrace();  
163.                     }  
164.                 }  
165.                 if(stm != null) {  
166.                       
167.                     try {  
168.                         stm.close();  
169.                     } catch (SQLException e) {  
170.                         // TODO Auto-generated catch block  
171.                         e.printStackTrace();  
172.                     }  
173.                 }  
174.                 if(conn != null) {  
175.                       
176.                     try {  
177.                         conn.close();  
178.                     } catch (SQLException e) {  
179.                         // TODO Auto-generated catch block  
180.                         e.printStackTrace();  
181.                     }  
182.                 }  
183.             }  
184.         }  
185.         return "";  
186.     }  
187.       
188.     public static void main(String[] args) {  
189.           
190.         SqlHelper.readXw("0101",0,1);  
191.     }  
192. }  

我查询的是Oracle数据库，所以是根据rownum进行分页的；如果你使用的是SQL Server数据库，就应该用top来进行分页。

readXw方法，接受xwlx新闻类型，从第几条开始firstRow，查询几条maxRow。

所以拼接成的字符串应该是这种形式：

{totalProperty:2,root:[{xwid:'201203131006028891000',xwbt:'教师录用公示 ',xwzz:'师资办',fbsj:'2012-03-13',ly:'人事处',lx:'0101',zt:'发布'}]}

totalProperty表示总共有多少条记录，而root中则放本页中应该显示的记录。

 

记录被查询出来了，总该有个东西调用它吧。这就需要一个servlet。此Servlet起到连接包含ext的JSP页面与查询数据库的SqlHelper类的作用。

ext传三个参数给servlet,servlet再调用SqlHelper的readXw方法。

Servlet代码如下：

[java]  view plain copy

1. public void doPost(HttpServletRequest request, HttpServletResponse response)  
2.             throws ServletException, IOException {  
3.   
4.         request.setCharacterEncoding("utf-8");  
5.         response.setCharacterEncoding("utf-8");  
6.         response.setContentType("application/json");  
7.         String xwlx = request.getParameter("xwlx");  
8.         int start = Integer.parseInt(request.getParameter("start"));  
9.         int limit = Integer.parseInt(request.getParameter("limit"));  
10.         System.out.println("start:"+start+",limit:"+limit);  
11.         
12.         String jsonStr = SqlHelper.readXw(xwlx,start,limit);  
13.         response.getWriter().write(jsonStr);      
14.     }  

 

最后，就是我们的JSP页面了：

[html]  view plain copy

1. <%@ page language="java"  pageEncoding="UTF-8"%>  
2. <%   
3.     response.addHeader("Cache-Control","no-cache");     
4.     String path = request.getContextPath();  
5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";     
6. %>  
7.   
8. <html>  
9.     <head>      
10.         <meta http-equiv="pragma" content="no-cache">  
11.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
12.         <!--禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览-->  
13.         <meta http-equiv="cache-control" content="no-cache">  
14.         <meta http-equiv="expires" content="0">  
15.         <title></title>   
16.   
17.         <link rel="stylesheet" type="text/css" href="/ext2/resources/css/ext-all.css"></link>  
18.         <script type="text/javascript" src="/ext2/adapter/ext/ext-base.js"></script>  
19.         <script type="text/javascript" src="/ext2/ext-all.js"></script>  
20.         <script type="text/javascript" src='<%=path%>/dwr/engine.js'></script>  
21.         <script type="text/javascript" src='<%=path%>/dwr/interface/db2Json.js'></script>  
22.         <script type="text/javascript" src="<%=path%>/dwr/interface/hbutHrDWR.js"></script>  
23.   </head>  
24.   <body>  
25.     <!--上方的工具栏  -->  
26.     <div style="width:100%;height:40px;" id="northToolbar"></div>  
27.     <!-- 下方的GridPanel -->  
28.     <div style="width:100%;height:300px;" id="southDiv"></div>  
29.   </body>  
30. </html>  
31. <script type="text/javascript">  
32. var xwlx = '0101';  
33. var xwlxCombo;  
34. var curPage = 1;  
35. var data,store;  
36. Ext.onReady(function() {  
37.   
38.     //alert("<%=path%>");  
39.     //上方的工具栏  
40.     var northToolbar = new Ext.Toolbar();  
41.       
42.     northToolbar.render('northToolbar');  
43.       
44.     var xwlxStore = new Ext.data.SimpleStore({  
45.       
46.         fields:['value','text']  
47.     });  
48.       
49.     db2Json.selectSimpleData("select t.sys_code,(select t1.sys_name from system_property t1 where t1.sys_type = '新闻' and t1.sys_code=t.ext1)||'_'||t.sys_name from system_property t where t.sys_type = '新闻' and t.ext1 is not null order by t.sys_code",function(dat){  
50.       
51.         xwlxStore.loadData(eval(dat));  
52.         Ext.getCmp('xwlxCombo').setValue('0101');  
53.     });  
54.     xwlxCombo = new Ext.form.ComboBox({  
55.       
56.         id:'xwlxCombo',  
57.         store:xwlxStore,  
58.         displayField:'text',  
59.         valueField:'value',  
60.         mode:'local',  
61.         triggerAction:'all',  
62.         selectOnFocus:true,  
63.         typeAhead:true  
64.     });  
65.       
66.     var refreshBtn = new Ext.Toolbar.Button({  
67.       
68.         icon: "img/arrow_refresh.png",  
69.         cls: "x-btn-text-icon bmenu",  
70.         text: "刷新",  
71.         handler:function clickRefresh() {  
72.           
73.             xwlx = xwlxCombo.getValue();  
74.               
75.             //重新加载store里的数据  
76.             store.proxy.conn.url='../servlet/PageServlet?xwlx='+xwlx;  
77.             store.load({params:{start:0,limit:1}});  
78.         }  
79.     });  
80.       
81.       
82.     northToolbar.add({text:'新闻类型'},xwlxCombo,'-',refreshBtn);  
83.       
84.     //显示新闻的grid  
85.     var cm = new Ext.grid.ColumnModel([  
86.           
87.         {header:'新闻ID号',dataIndex:'xwid'},  
88.         {header:'新闻标题',dataIndex:'xwbt'},  
89.         {header:'作者',dataIndex:'xwzz'},  
90.         {header:'时间',dataIndex:'fbsj'},  
91.         {header:'来源',dataIndex:'ly'},  
92.         {header:'类型',dataIndex:'lx'},  
93.         {header:'状态',dataIndex:'zt'}  
94.     ]);  
95.       
96.     store = new Ext.data.Store({  
97.       
98.         proxy: new Ext.data.HttpProxy({url:'../servlet/PageServlet?xwlx='+xwlx}),  
99.         reader:new Ext.data.JsonReader({  
100.           
101.             totalProperty:'totalProperty',  
102.             root:'root'  
103.         },[  
104.               
105.             {name:'xwid'},  
106.             {name:'xwbt'},  
107.             {name:'xwzz'},  
108.             {name:'fbsj'},  
109.             {name:'ly'},  
110.             {name:'lx'},  
111.             {name:'zt'}  
112.         ])  
113.     });  
114.       
115.     var grid = new Ext.grid.GridPanel({  
116.       
117.         store:store,  
118.         cm:cm,  
119.         renderTo:'southDiv',  
120.         autoHeight:true,  
121.         width: Ext.get('southDiv').getWidth(),  
122.         viewConfig:{  
123.             forceFit:true  
124.         },  
125.         bbar:new Ext.PagingToolbar({  
126.             pageSize:1,  
127.             store:store,  
128.             displayInfo:true,  
129.             displayMsg:'显示第{0}条到第{1}条记录，共{2}条',  
130.             emptyMsg:'没有记录'  
131.         })  
132.     });  
133.     store.load({params:{start:0,limit:1}});  
134. });  
135. </script>  

需要说明的有几个方面：

1.如果Json串是正确的，而Grid却显示不了数据，那么肯定是返回的数据中有html标签。故用servlet返回json串，而不要用JSP返回json串。

2.如果分页的地方出现了错误，检查bbar的pageSize和store.load({params:{start:**,limit:**}})的规定是否一致；再检查json串中的totalProperty是否是全部记录的数目，而root中是否是当前页面应该显示的数据。

3.在重新选择新闻类型，动态改变store的url代码关键为：

[java]  view plain copy

1. var refreshBtn = new Ext.Toolbar.Button({  
2.       
3.         icon: "img/arrow_refresh.png",  
4.         cls: "x-btn-text-icon bmenu",  
5.         text: "刷新",  
6.         handler:function clickRefresh() {  
7.           
8.             xwlx = xwlxCombo.getValue();  
9.               
10.             //重新加载store里的数据  
11.             store.proxy.conn.url='../servlet/PageServlet?xwlx='+xwlx;  
12.             store.load({params:{start:0,limit:1}});  
13.         }  
14.     });  

即refreshBtn被点击时，获得选择的新闻类型编号，动态改变store的url，并重新加载store。