jquery grid插件 Flexigrid + servlet

前些日子写了个源于jquery grid插件Flexigrid  算不上例子的一片文章。
为了能更快的使用这个东东 。。 今天做了一个相对比较详细的例子.
对一个工作信息表操控的例子。

第一步：创建数据库
Sql代码 复制代码 收藏代码
  1. /*   
  2. MySQL Data Transfer   
  3. Source Host: localhost   
  4. Source Database: spiderdata   
  5. Target Host: localhost   
  6. Target Database: spiderdata   
  7. Date: 2008/9/2 10:42:51   
  8. */   
  9.   
  10. SET FOREIGN_KEY_CHECKS=0;   
  11. -- ----------------------------   
  12. -- Table structure for job_info1   
  13. -- ----------------------------   
  14. CREATE TABLE `job_info1` (   
  15.   `id` int(11) NOT NULL AUTO_INCREMENT,   
  16.   `job_name` varchar(255) DEFAULT NULL,   
  17.   `company_email` text,   
  18.   `date` varchar(255) DEFAULT NULL,   
  19.   `work_address` varchar(255) DEFAULT NULL,   
  20.   `number` varchar(255) DEFAULT NULL,   
  21.   `work_limit` varchar(255) DEFAULT NULL,   
  22.   `level` varchar(255) DEFAULT NULL,   
  23.   `salary` varchar(255) DEFAULT NULL,   
  24.   `job_id` varchar(255) DEFAULT NULL,   
  25.   `description` mediumtext,   
  26.   `language` varchar(255) DEFAULT NULL,   
  27.   PRIMARY KEY (`id`),   
  28.   UNIQUE KEY `jobid` (`job_id`)   
  29. ) ENGINE=InnoDB AUTO_INCREMENT=42234 DEFAULT CHARSET=utf8;  
/*
MySQL Data Transfer
Source Host: localhost
Source Database: spiderdata
Target Host: localhost
Target Database: spiderdata
Date: 2008/9/2 10:42:51
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for job_info1
-- ----------------------------
CREATE TABLE `job_info1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `job_name` varchar(255) DEFAULT NULL,
  `company_email` text,
  `date` varchar(255) DEFAULT NULL,
  `work_address` varchar(255) DEFAULT NULL,
  `number` varchar(255) DEFAULT NULL,
  `work_limit` varchar(255) DEFAULT NULL,
  `level` varchar(255) DEFAULT NULL,
  `salary` varchar(255) DEFAULT NULL,
  `job_id` varchar(255) DEFAULT NULL,
  `description` mediumtext,
  `language` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `jobid` (`job_id`)
) ENGINE=InnoDB AUTO_INCREMENT=42234 DEFAULT CHARSET=utf8;
sql 文件在附件中
第二步：下载Flexigrid 插件
http://www.webplicity.net/flexigrid/
第三步：解压下载后的zip文件到你的web工程中

第四步：编写jsp代码
Html代码 复制代码 收藏代码
  1. <%@page contentType="text/html; charset=utf-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6.         <title>Flexigrid测试</title>  
  7.         <link rel="stylesheet" href="style.css" />  
  8.         <link rel="stylesheet" type="text/css"  
  9.             href="css/flexigrid/flexigrid.css">  
  10.         <script type="text/javascript" src="lib/jquery/jquery.js"></script>  
  11.         <script type="text/javascript" src="flexigrid.js"></script>  
  12.     </head>  
  13.     <body>  
  14.         <table id="flex1" style="display: none"></table>  
  15.         <script type="text/javascript">  
  16.             $("#flex1").flexigrid   
  17.             (   
  18.             {   
  19.             url: 'http://localhost:8080/Flexigrid/DBServlet',   
  20.             dataType: 'json',   
  21.             colModel : [   
  22.                 {display: 'ID', name : 'jobid', width : 10, sortable : true, align: 'center'},   
  23.                 {display: '职位名称', name : 'job_name', width : 180, sortable : true, align: 'left'},   
  24.                 {display: '工作地点', name : 'work_address', width : 80, sortable : true, align: 'left'},   
  25.                 {display: '工作年限', name : 'work_limit', width : 80, sortable : true, align: 'left'},   
  26.                 {display: '薪金', name : 'salary', width : 80, sortable : true, align: 'left'}   
  27.                 ],   
  28.             buttons : [   
  29.                 {name: 'Add', bclass: 'add', onpress : test},   
  30.                 {name: 'Delete', bclass: 'delete', onpress : test},   
  31.                 {separator: true}   
  32.                 ],   
  33.             searchitems : [   
  34.                 {display: '职位名称', name : 'jobtitle'},   
  35.                 {display: '地点', name : 'workplace', isdefault: true}   
  36.                 ],   
  37.             usepager: true,   
  38.             title: '最新职位',   
  39.             useRp: true,   
  40.             rp: 15,   
  41.             showTableToggleBtn: true,   
  42.             width: 700,   
  43.             height: 200   
  44.             }   
  45.             );   
  46.                
  47.             function test(com,grid)   
  48.             {   
  49.                 if (com=='Delete')   
  50.                     {   
  51.                         confirm('Delete ' + $('.trSelected',grid).length + ' items?')   
  52.                     }   
  53.                 else if (com=='Add')   
  54.                     {   
  55.                         alert('Add New Item');   
  56.                     }              
  57.             }   
  58.   
  59.         </script>  
  60.     </body>  
<%@page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Flexigrid测试</title>
		<link rel="stylesheet" href="style.css" />
		<link rel="stylesheet" type="text/css"
			href="css/flexigrid/flexigrid.css">
		<script type="text/javascript" src="lib/jquery/jquery.js"></script>
		<script type="text/javascript" src="flexigrid.js"></script>
	</head>
	<body>
		<table id="flex1" style="display: none"></table>
		<script type="text/javascript">
			$("#flex1").flexigrid
			(
			{
			url: 'http://localhost:8080/Flexigrid/DBServlet',
			dataType: 'json',
			colModel : [
				{display: 'ID', name : 'jobid', width : 10, sortable : true, align: 'center'},
				{display: '职位名称', name : 'job_name', width : 180, sortable : true, align: 'left'},
				{display: '工作地点', name : 'work_address', width : 80, sortable : true, align: 'left'},
				{display: '工作年限', name : 'work_limit', width : 80, sortable : true, align: 'left'},
				{display: '薪金', name : 'salary', width : 80, sortable : true, align: 'left'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: '职位名称', name : 'jobtitle'},
				{display: '地点', name : 'workplace', isdefault: true}
				],
			usepager: true,
			title: '最新职位',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);
			
			function test(com,grid)
			{
				if (com=='Delete')
					{
						confirm('Delete ' + $('.trSelected',grid).length + ' items?')
					}
				else if (com=='Add')
					{
						alert('Add New Item');
					}			
			}

		</script>
	</body>


以上代码相关参数讲解：

      url: 'http://localhost:8080/Flexigrid/DBServlet' ajax访问的url

      dataType: 'json', 响应的数据类型

      colModel [....] 表格中显示列的设置....

      buttons 按钮设置 根据业务不同 添加适合业务的按钮

      searchitems 查询下拉列表中的选项设置

      usepager: true, 是否分页

      title: '最新职位', 表头

      useRp: true, 用户自定义分页

      rp: 15, 每页显示多少数据

      showTableToggleBtn: true, 略

      width: 700, 略

      height: 200 略


第五步：后台访问数据库代码 以及 生成json字符串代码
Java代码 复制代码 收藏代码
  1. package com.url.db;   
  2.   
  3. import java.sql.SQLException;   
  4. import java.util.ArrayList;   
  5. import java.util.HashMap;   
  6. import java.util.List;   
  7. import java.util.Map;   
  8.   
  9. import javax.sql.DataSource;   
  10.   
  11. import org.apache.commons.dbcp.BasicDataSource;   
  12. import org.apache.commons.dbutils.QueryRunner;   
  13. import org.apache.commons.dbutils.handlers.MapHandler;   
  14. import org.apache.commons.dbutils.handlers.MapListHandler;   
  15.   
  16. import com.url.ajax.json.JSONObject;   
  17.   
  18. public class DBTest {   
  19.        
  20.     /**  
  21.      * 简单的数据库连接  
  22.      * @return  
  23.      */  
  24.     public static DataSource setupDataSource() {   
  25.         BasicDataSource ds = new BasicDataSource();   
  26.         ds.setDriverClassName("com.mysql.jdbc.Driver");   
  27.         ds.setUsername("root");   
  28.         ds.setPassword("password");   
  29.         ds.setUrl("jdbc:mysql://localhost:3306/spiderdata?useUnicode=true&amp;characterEncoding=utf-8");   
  30.         return ds;   
  31.     }   
  32.     /**  
  33.      * 按相关条件查询数据  
  34.      * @param startIndex  
  35.      * @param maxResult  
  36.      * @return  
  37.      */  
  38.     @SuppressWarnings("unchecked")   
  39.     public List getJobInfo(int startIndex, int maxResult) {   
  40.         QueryRunner queryRunner = new QueryRunner(setupDataSource());   
  41.         String sql = "select * from job_info1 limit ?, ?";   
  42.         List joblist = null;   
  43.         try {   
  44.             joblist = (List)queryRunner.query(sql, new Object[]{startIndex, maxResult}, new MapListHandler());   
  45.         } catch (SQLException e) {   
  46.             e.printStackTrace();   
  47.         }   
  48.         return joblist;   
  49.     }   
  50.        
  51.     /**  
  52.      * 计算总数据量  
  53.      * @return  
  54.      */  
  55.     @SuppressWarnings("unchecked")   
  56.     public long getJobCount() {   
  57.         String sql = "select count(*) as num from job_info1";   
  58.         QueryRunner queryRunner = new QueryRunner(setupDataSource());   
  59.         long count = 0L;   
  60.         try {   
  61.             Map map = (Map)queryRunner.query(sql, new MapHandler());   
  62.             count  = (Long)map.get("num");   
  63.         } catch (SQLException e) {   
  64.             e.printStackTrace();   
  65.         }   
  66.         return count;   
  67.     }   
  68.     /**  
  69.      * 产生json字符串  
  70.      * @param list  
  71.      * @param pageInfo  
  72.      * @return  
  73.      */  
  74.     @SuppressWarnings("unchecked")   
  75.     public String getJsonString(List list, Map pageInfo) {   
  76.         List mapList = new ArrayList();      
  77.         for(int i = 0; i < list.size(); i++) {   
  78.             Map cellMap = new HashMap();   
  79.             cellMap.put("id", ((Map)list.get(i)).get("id"));   
  80.             cellMap.put("cell", new Object[] {((Map)list.get(i)).get("id"), ((Map)list.get(i)).get("job_name"), ((Map)list.get(i)).get("work_address"), ((Map)list.get(i)).get("work_limit"), ((Map)list.get(i)).get("salary")});      
  81.             mapList.add(cellMap);   
  82.         }   
  83.         pageInfo.put("rows", mapList);   
  84.         JSONObject object = new JSONObject(pageInfo);   
  85.         return object.toString();   
  86.     }   
  87.        
  88.     /**  
  89.      * 测试。。。。。  
  90.      * @param args  
  91.      */  
  92.     @SuppressWarnings("unchecked")   
  93.     public static void main(String[] args) {   
  94.         DBTest test = new DBTest();   
  95.         Map pageInfo = new HashMap();      
  96.         pageInfo.put("page", 2);      
  97.         pageInfo.put("total", 200);     
  98.         System.out.println(test.getJsonString(test.getJobInfo(0, 3), pageInfo));   
  99.   
  100.        
  101.     }   
  102.     
  103. }  
package com.url.db;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.sql.DataSource;

import org.apache.commons.dbcp.BasicDataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.MapHandler;
import org.apache.commons.dbutils.handlers.MapListHandler;

import com.url.ajax.json.JSONObject;

public class DBTest {
	
	/**
	 * 简单的数据库连接
	 * @return
	 */
    public static DataSource setupDataSource() {
        BasicDataSource ds = new BasicDataSource();
        ds.setDriverClassName("com.mysql.jdbc.Driver");
        ds.setUsername("root");
        ds.setPassword("password");
        ds.setUrl("jdbc:mysql://localhost:3306/spiderdata?useUnicode=true&amp;characterEncoding=utf-8");
        return ds;
    }
    /**
     * 按相关条件查询数据
     * @param startIndex
     * @param maxResult
     * @return
     */
    @SuppressWarnings("unchecked")
	public List getJobInfo(int startIndex, int maxResult) {
    	QueryRunner queryRunner = new QueryRunner(setupDataSource());
    	String sql = "select * from job_info1 limit ?, ?";
    	List joblist = null;
		try {
			joblist = (List)queryRunner.query(sql, new Object[]{startIndex, maxResult}, new MapListHandler());
		} catch (SQLException e) {
			e.printStackTrace();
		}
    	return joblist;
    }
    
    /**
     * 计算总数据量
     * @return
     */
    @SuppressWarnings("unchecked")
	public long getJobCount() {
    	String sql = "select count(*) as num from job_info1";
    	QueryRunner queryRunner = new QueryRunner(setupDataSource());
    	long count = 0L;
    	try {
    		Map map = (Map)queryRunner.query(sql, new MapHandler());
    		count  = (Long)map.get("num");
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return count;
    }
    /**
     * 产生json字符串
     * @param list
     * @param pageInfo
     * @return
     */
    @SuppressWarnings("unchecked")
    public String getJsonString(List list, Map pageInfo) {
    	List mapList = new ArrayList();   
    	for(int i = 0; i < list.size(); i++) {
    		Map cellMap = new HashMap();
    		cellMap.put("id", ((Map)list.get(i)).get("id"));
    		cellMap.put("cell", new Object[] {((Map)list.get(i)).get("id"), ((Map)list.get(i)).get("job_name"), ((Map)list.get(i)).get("work_address"), ((Map)list.get(i)).get("work_limit"), ((Map)list.get(i)).get("salary")});   
    		mapList.add(cellMap);
    	}
    	pageInfo.put("rows", mapList);
    	JSONObject object = new JSONObject(pageInfo);
    	return object.toString();
    }
    
    /**
     * 测试。。。。。
     * @param args
     */
    @SuppressWarnings("unchecked")
	public static void main(String[] args) {
    	DBTest test = new DBTest();
		Map pageInfo = new HashMap();   
		pageInfo.put("page", 2);   
		pageInfo.put("total", 200);  
    	System.out.println(test.getJsonString(test.getJobInfo(0, 3), pageInfo));

	
	}
 
}

以上代码测试后得到的json字符串
Javascript代码 复制代码 收藏代码
  1. {"total":200,"page":2,"rows":[{"id":1,"cell":[1,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":2,"cell":[2,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":3,"cell":[3,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]}]}  
{"total":200,"page":2,"rows":[{"id":1,"cell":[1,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":2,"cell":[2,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":3,"cell":[3,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]}]}

第六步：后台servlet处理
Java代码 复制代码 收藏代码
  1. 本部分代码值得注意的是 你后台接受ajax请求是post提交上来的，所以在servlet里的post方法中处理。如果你使用的其他的web框架 可以不用考虑   
  2. package com.url.servlet;   
  3.   
  4. import java.io.IOException;   
  5. import java.util.HashMap;   
  6. import java.util.Map;   
  7.   
  8. import javax.servlet.ServletException;   
  9. import javax.servlet.http.HttpServlet;   
  10. import javax.servlet.http.HttpServletRequest;   
  11. import javax.servlet.http.HttpServletResponse;   
  12.   
  13. import com.url.db.DBTest;   
  14.   
  15. public class DBServlet extends HttpServlet {   
  16.   
  17.     public DBServlet() {   
  18.         super();   
  19.     }   
  20.   
  21.   
  22.     public void destroy() {   
  23.         super.destroy();    
  24.        
  25.     }   
  26.   
  27.     @SuppressWarnings("unchecked")   
  28.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {   
  29.         //得到当前页数   
  30.         String page = request.getParameter("page");   
  31.         //得到每页显示行数   
  32.         String maxResult = request.getParameter("rp");   
  33.         //计算查询开始数据下标   
  34.         int startIndex = (Integer.parseInt(page) - 1) * Integer.parseInt(maxResult);   
  35.         //数据操控对象昂   
  36.         DBTest dbTest = new DBTest();   
  37.         //创造json所需的Map（此处代码可使用StringBuffer 拼接json字符串代替，但这种做法比较繁琐）   
  38.         Map pageInfo = new HashMap();   
  39.         //当前页数设置   
  40.         pageInfo.put("page", page);   
  41.         //总数据量设置   
  42.         pageInfo.put("total", dbTest.getJobCount());   
  43.         //生成json字符串   
  44.         String jsonStr = dbTest.getJsonString(dbTest.getJobInfo(startIndex, Integer.parseInt(maxResult)), pageInfo);   
  45.         //response 相关处理   
  46.         response.setContentType("html/txt");   
  47.         response.setCharacterEncoding("utf-8");   
  48.         response.setHeader("Pragma", "no-cache");   
  49.         response.setHeader("Cache-Control", "no-cache, must-revalidate");   
  50.         response.setHeader("Pragma", "no-cache");   
  51.         try {   
  52.             response.getWriter().write(jsonStr);   
  53.             response.getWriter().flush();   
  54.             response.getWriter().close();   
  55.         } catch (IOException e) {   
  56.             e.printStackTrace();   
  57.         }   
  58.     }   
  59.        
  60. }  
本部分代码值得注意的是 你后台接受ajax请求是post提交上来的，所以在servlet里的post方法中处理。如果你使用的其他的web框架 可以不用考虑
package com.url.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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

import com.url.db.DBTest;

public class DBServlet extends HttpServlet {

	public DBServlet() {
		super();
	}


	public void destroy() {
		super.destroy(); 
	
	}

	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//得到当前页数
		String page = request.getParameter("page");
		//得到每页显示行数
		String maxResult = request.getParameter("rp");
		//计算查询开始数据下标
		int startIndex = (Integer.parseInt(page) - 1) * Integer.parseInt(maxResult);
		//数据操控对象昂
		DBTest dbTest = new DBTest();
		//创造json所需的Map（此处代码可使用StringBuffer 拼接json字符串代替，但这种做法比较繁琐）
		Map pageInfo = new HashMap();
		//当前页数设置
		pageInfo.put("page", page);
		//总数据量设置
		pageInfo.put("total", dbTest.getJobCount());
		//生成json字符串
		String jsonStr = dbTest.getJsonString(dbTest.getJobInfo(startIndex, Integer.parseInt(maxResult)), pageInfo);
		//response 相关处理
		response.setContentType("html/txt");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache, must-revalidate");
		response.setHeader("Pragma", "no-cache");
		try {
			response.getWriter().write(jsonStr);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
}

第七步：测试你的代码
第九步：本例代码下载 ：） 祝你好运
http://ynial.iteye.com/upload/attachment/37213/beaacf16-831a-33b2-b960-09d028d13668.rar
  • 描述: 拷贝相关文件到工程中
  • 大小: 13.8 KB
  • 描述: demo显示结果
  • 大小: 38.6 KB

posted on 2012-07-01 23:36  ycty  阅读(310)  评论(0)    收藏  举报