jquery grid插件 Flexigrid + servlet

2008 - 09 - 02
关键字: ajax jquery 分页 flexigrid
前些日子写了个源于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.   `datevarchar(255) DEFAULT NULL,   
  19.   `work_address` varchar(255) DEFAULT NULL,   
  20.   `number` varchar(255) DEFAULT NULL,   
  21.   `work_limit` varchar(255) DEFAULT NULL,   
  22.   `levelvarchar(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;  
 
sql 文件在附件中
第二步:下载Flexigrid 插件
http://www.webplicity.net/flexigrid/
第三步:解压下载后的zip文件到你的web工程中 
jquery grid插件 Flexigrid + servlet_第1张图片 
第四步:编写jsp代码
Html代码
  1. <%@page contentType="text/html; charset=utf-8"%>  
  2. >  
  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>  
 


以上代码相关参数讲解:

  • 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&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(03), pageInfo));   
  99.   
  100.        
  101.     }   
  102.     
  103. }  

以上代码测试后得到的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年","面议"]}]}  

第六步:后台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. }  


第七步:测试你的代码

jquery grid插件 Flexigrid + servlet_第2张图片 
第九步:本例代码下载 :) 祝你好运
http://ynial.javaeye.com/upload/attachment/37213/beaacf16-831a-33b2-b960-09d028d13668.rar

  •  
  • 描述: 拷贝相关文件到工程中
  • 大小: 13.8 KB
  • jquery grid插件 Flexigrid + servlet_第3张图片 
  • 描述: demo显示结果
  • 大小: 38.6 KB
  • Flexigrid.rar (840.6 KB)
  • 描述:
  • 下载次数: 74

你可能感兴趣的:(flex,jquery,stylesheet,json,servlet,delete,web框架)