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+"/";
%>



  
    
    
    
	
	
	    
	
	
	
	 
	
	
	
	
	
  
  
  
    

        
           
        
  

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. 

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

	 *
	 * 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代码：

 

  
    This is the description of my J2EE component
    This is the display name of my J2EE component
    pageServlet
    xuyan.pageServlet
  

  
    pageServlet
    /pageServlet
  
  
    index.jsp