当前位置: 代码迷 >> JavaScript >> J2EE之 Extjs4.0 Grid 分页展示
  详细解决方案

J2EE之 Extjs4.0 Grid 分页展示

热度:161   发布时间:2013-01-23 10:44:50.0
J2EE之 Extjs4.0 Grid 分页显示
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架
功能丰富,无人能出其右。
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。
其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。
 
 
index.jsp页面代码:
 
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="ext/bootstrap.js" ></script>
	
	<script type="text/javascript" src="ext/ext-all.js" ></script>
	
	<script type="text/javascript"  >
	//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.data.*'
		 ]
		 
);

Ext.onReady(
		function(){
			//创建Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'}
						]
					}
			)
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						//设置分页大小
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'pageServlet',
					        reader: {
								//数据格式为json
					            type: 'json',
					            root: 'bugs',
					            //获取数据总数
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					columns:[
					         {text:'姓名',width:120,dataIndex:'name',sortable:true},
					         {text:'性别',width:120,dataIndex:'sex',sortable:true},
					         {text:'年龄',width:120,dataIndex:'age',sortable:true}
					],
					height:200, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid分页查询示例示例', 
			        renderTo: 'grid', 
			       
			        //分页功能
			        bbar: Ext.create('Ext.PagingToolbar', { 
			        	            store: store, 
			        	            displayInfo: true, 
			        	            displayMsg: '显示 {0} - {1} 条,共计 {2} 条', 
			        	            emptyMsg: "没有数据" 
			        	  }
			        ) 
				}
			)
			store.loadPage(1); 
		}
)



	</script>
  </head>
  
  <body>
    <div id="grid">
        
           
        </div>
  </body>
</html>

pageServlet代码:
 
package xuyan;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class pageServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		Connection con = null;  
		        PreparedStatement pstmt = null;  
		        ResultSet rs = null;  
		        String start = request.getParameter("start");  
		        String limit = request.getParameter("limit");  
		        StringBuilder sb = null;  
	        //数据总数  
		        int total = 0;  
		  
		        try {  
		            Class.forName("com.mysql.jdbc.Driver");  
		           con = DriverManager.getConnection(  
		                    "jdbc:mysql://localhost:3306/test", "root", "1234");  
		  
		        } catch (ClassNotFoundException e) {  
		            e.printStackTrace();  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
	          
		        //查询数据总数语句  
		       String countSql = "select count(*) from users";  
		        try {  
		            pstmt = con.prepareStatement(countSql);  
		            rs = pstmt.executeQuery();  
		            while(rs.next()){  
		                total = rs.getInt(1);  
		            }  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		          
		        //分页查询语句  
		        String sql = "select * from users limit " + start + ", " + limit;  
		        try {  
		            pstmt = con.prepareStatement(sql);  
		            rs = pstmt.executeQuery();  
		            sb = new StringBuilder();  
		            //设置json数据格式  
		            sb.append("{totalCount:"+total+",bugs:[");  
		            while (rs.next()) {  
		                sb.append("{");  
		                sb.append("name:" + "\'" + rs.getString(1) + "\',");  
		               sb.append("sex:" + "\'" + rs.getString(2) + "\',");  
		                sb.append("age:" + "\'" + rs.getString(3) + "\'");  
		                sb.append("},");  
		            }  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		        try {  
		            rs.close();  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		        String json = sb.substring(0, sb.length() - 1);  
		        json += "]}";  
		          
		System.out.println(json);  
		        response.setContentType("text/html");  
		        response.setCharacterEncoding("UTF-8");  
		        try {  
		            response.getWriter().write(json);  
		            response.getWriter().close();  
		        } catch (IOException e) {  
		            e.printStackTrace();  
		        }  
		    }  

		
		//
		
	

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}

}

web.xml代码:
 
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>pageServlet</servlet-name>
    <servlet-class>xuyan.pageServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>pageServlet</servlet-name>
    <url-pattern>/pageServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 
  相关解决方案