jquery插件FlexiGrid的使用

jquery插件FlexiGrid的使用

已不推荐下载，如要下载去这个连接下载最新的 
http://gundumw100.iteye.com/blog/545610 


更新于2009-11-30 
先看一下FlexiGrid的参数 
Java代码  收藏代码
  1. height: 200, //flexigrid插件的高度，单位为px  
  2.  'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题  
  3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  
  4. novstripe: false,//没用过这个属性  
  5. min 30, //列的最小宽度  
  6. minheight: 80, //列的最小高度  
  7. resizable: false, //resizable table是否可伸缩  
  8. url: false, //ajax url,ajax方式对应的url地址  
  9. method: 'POST', // data sending method,数据发送方式  
  10. dataType: 'json', // type of data loaded,数据加载的类型，xml,json  
  11. errormsg: '发生错误', //错误提升信息  
  12. usepager: false, //是否分页  
  13. nowrap: true, //是否不换行  
  14. page: 1, //current page,默认当前页  
  15. total: 1, //total pages,总页面数  
  16. useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数  
  17. rp: 25, // results per page,每页默认的结果数  
  18. rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数  
  19. title: false, //是否包含标题  
  20. pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式  
  21. procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息  
  22. query: '', //搜索查询的条件  
  23. qtype: '', //搜索查询的类别  
  24. qop: "Eq", //搜索的操作符  
  25. nomsg: '没有符合条件的记录存在', //无结果的提示信息  
  26. minColToggle: 1, //允许显示的最小列数  
  27. showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。  
  28. hideOnSubmit: true, //是否在回调时显示遮盖  
  29. showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮   
  30. autoload: true, //自动加载，即第一次发起ajax请求  
  31. blockOpacity: 0.5, //透明度设置  
  32. onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用  
  33. onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序  
  34. onSuccess: false, //成功后执行  
  35. onSubmit: false, // 调用自定义的计算函数，基本没用          

先下载FlexiGrid api 
[url]http://www.flexigrid.info/ [/url] 
怎么导入就不说了，只要注意路径就没问题 
新建index.jsp文件： 
Html代码  收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>FlexiGrid</title>  
  8.   
  9. <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link>  
  10. <script type="text/javascript" src="lib/jquery/jquery.js"></script>  
  11. <script type="text/javascript" src="flexigrid.pack.js"></script>  
  12. <script type="text/javascript">  
  13. $(document).ready(function(){  
  14.     var maiheight = document.documentElement.clientHeight;  
  15.     var w = $("#ptable").width() - 3;  
  16.     var gapTop =  30;  
  17.     var otherpm = 150; //GridHead，toolbar，footer,gridmargin  
  18.     var h = maiheight - gapTop - otherpm;  
  19.   
  20. var grid=$("#flex1").flexigrid({  
  21.          w,  
  22.         height: h,  
  23.         url: 'flexGridServlet.do',  
  24.         dataType: 'json',  
  25.         colModel : [  
  26.             //{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},  
  27.             {display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},  
  28.             {display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},  
  29.             {display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},  
  30.             {display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney},  
  31.             {display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},  
  32.             {display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}                                                                  
  33.             ],  
  34.         buttons : [  
  35.             {name: '添加', bclass: 'add', onpress : toolbar},  
  36.             {name: '删除', bclass: 'delete', onpress : toolbar},  
  37.             {name: '修改', bclass: 'modify', onpress : toolbar},                
  38.             {separator: true}  
  39.             ],  
  40.         searchitems : [  
  41.             {display: '编号', name : 'id', isdefault: true},  
  42.             {display: '工作名称', name : 'job_name'},  
  43.             {display: '工作地址', name : 'work_address'},  
  44.             {display: '语言', name : 'language'}  
  45.             ],  
  46.         errormsg: '发生异常',  
  47.         sortname: "id",  
  48.         sortorder: "desc",  
  49.         usepager: true,  
  50.         title: '信息发布管理',  
  51.         pagestat: '显示记录从{from}到{to}，总数 {total} 条',  
  52.         useRp: true,  
  53.         rp: 10,  
  54.         rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数  
  55.         nomsg: '没有符合条件的记录存在',  
  56.         minColToggle: 1, //允许显示的最小列数  
  57.         showTableToggleBtn: true,  
  58.         autoload: true, //自动加载，即第一次发起ajax请求  
  59.         resizable: false, //table是否可伸缩  
  60.         procmsg: '加载中, 请稍等 ...',  
  61.         hideOnSubmit: true, //是否在回调时显示遮盖  
  62.         blockOpacity: 0.5,//透明度设置  
  63.         rowbinddata: true,  
  64.         showcheckbox: true  
  65.         //gridClass: "bbit-grid"//样式  
  66.     });  
  67.       
  68.     //$('.trSelected',grid).parent().removeClass("trSelected");  
  69.       
  70.     function toolbar(com,grid){  
  71.         if (com=='删除'){  
  72.             ${"action"}.value="delete";  
  73.             if($('.trSelected',grid).length==0){  
  74.                 alert("请选择要删除的数据");  
  75.             }else{  
  76.                 if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){  
  77.                      var  ids ="";  
  78.                      for(var i=0;i<$('.trSelected',grid).length;i++){  
  79.                         ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id  
  80.                       }  
  81.                       idsids=ids.substring(1);  
  82.                       $.ajax({  
  83.                             type: "POST",  
  84.                             url: "flexGridServlet.do?actionaction="+${"action"}.value,  
  85.                             data: "id="+ids,  
  86.                             dataType:"text",  
  87.                             success: function(msg){  
  88.                                 if(msg=="success"){  
  89.                                     $("#flex1").flexReload();  
  90.                                 }else{  
  91.                                     alert("有错误发生,msg="+msg);  
  92.                                 }  
  93.                             },  
  94.                             error: function(msg){  
  95.                                 alert(msg);  
  96.                             }  
  97.                         });  
  98.                 }  
  99.            }  
  100.         }else if (com=='添加'){  
  101.             ${"action"}.value="add";  
  102.             alert("flexGridServlet.do?actionaction="+${"action"}.value);  
  103.             window.location.href="flexGridServlet.do?action="+${"action"}.value;  
  104.         }else if (com=='修改'){  
  105.             ${"action"}.value="modify";  
  106.             if($(".trSelected").length==1){  
  107.                 alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());  
  108.                 window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();  
  109.                   
  110.             }else if($(".trSelected").length>1){  
  111.                 alert("请选择一个修改,不能同时修改多个");  
  112.             }else if($(".trSelected").length==0){  
  113.                 alert("请选择一个您要修改的记录")  
  114.             }  
  115.                
  116.             //$("#flex1").flexReload({});  
  117.         }  
  118.     }  
  119.     function formatMoney(value, pid) {  
  120.          return "￥" + parseFloat(value).toFixed(2);  
  121.     }  
  122.       
  123.               
  124. });  
  125. </script>  
  126. <style>  
  127.           
  128.    .flexigrid div.fbutton .add  
  129.        {  
  130.            background: url(css/images/add.png) no-repeat center left;  
  131.        }  
  132.   
  133.    .flexigrid div.fbutton .delete  
  134.        {  
  135.            background: url(css/images/close.png) no-repeat center left;  
  136.        }  
  137.    .flexigrid div.fbutton .modify  
  138.        {  
  139.            background: url(css/images/modify.png) no-repeat center left;  
  140.        }  
  141.       
  142. </style>  
  143. </head>  
  144. <body>  
  145. <div id="ptable" style="margin:10px">  
  146.     <table id="flex1" style="display:none"></table>  
  147. </div>    
  148. <input id="action" type="hidden" name="action" value="null" />  
  149. <script>  
  150.           
  151. </script>  
  152.   
  153. </body>  
  154. </html>  

servlet代码： 
Java代码  收藏代码
  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.sql.SQLException;  
  4. import java.util.*;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. public class FlexiGridServlet extends HttpServlet {  
  12.     private DBConnection db;  
  13.   
  14.     public void init() throws ServletException {  
  15.         System.out.println("--------------开始链接---------------------");  
  16.         db = new DBConnection();// 打开链接  
  17.         try {  
  18.             db.getCurrentConnection();  
  19.         } catch (SQLException e1) {  
  20.         }  
  21.         System.out.println("--------------打开链接成功---------------------");  
  22.     }  
  23.   
  24.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  25.             throws ServletException, IOException {  
  26.   
  27.         // response相关处理  
  28.         response.setContentType("html/txt");  
  29.         response.setCharacterEncoding("utf-8");  
  30.         response.setHeader("Pragma", "no-cache");  
  31.         response.setHeader("Cache-Control", "no-cache, must-revalidate");  
  32.         response.setHeader("Pragma", "no-cache");  
  33.   
  34.         String action = request.getParameter("action");  
  35.         System.out.println("action=" + action);  
  36.         String tableName = "job_info1";  
  37.          if ("add".equals(action)) {  
  38.             System.out.println("--------------------add--------------------");  
  39.             return;  
  40.         } else if ("delete".equals(action)) {  
  41.             System.out.println("--------------------delete------------------");  
  42.             String ids=request.getParameter("id");  
  43.             System.out.println("ids="+ids);  
  44. //          String[] id=ids.split(",");  
  45.             String sql = "delete from "+tableName+" where id in ("+ids+")";  
  46.               
  47.             System.out.println("sql="+sql);  
  48.             try {  
  49.                 db.executeUpdate(sql, null);  
  50.             } catch (Exception e) {  
  51.                 // TODO Auto-generated catch block  
  52.                 e.printStackTrace();  
  53.             }  
  54.             System.out.println("delete success!!!");  
  55.             response.getWriter().write("success");  
  56.             response.getWriter().flush();  
  57.             response.getWriter().close();  
  58.             return;  
  59.         } else if ("modify".equals(action)) {  
  60.             System.out.println("--------------------modify-------------------");  
  61.             return;  
  62.         } else {  
  63.   
  64.         }  
  65.          System.out.println("--------------------下来了-------------------");  
  66.           
  67.         // 获得当前页数  
  68.         String pageIndex = request.getParameter("page");  
  69.         System.out.println("pageIndex=" + pageIndex);  
  70.         // 获得每页数据最大量  
  71.         String pageSize = request.getParameter("rp");  
  72.         System.out.println("pageSize=" + pageSize);  
  73.         // 获得模糊查询文本输入框的值  
  74.         String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");  
  75.                   
  76.         System.out.println("query=" + query);  
  77.         // 获得模糊查询条件  
  78.         String qtype = request.getParameter("qtype");  
  79.         System.out.println("qtype=" + qtype);  
  80.         // 排序的字段  
  81.         String sortname = request.getParameter("sortname");  
  82.         System.out.println("sortname=" + sortname);  
  83.         // desc or asc  
  84.         String sortorder = request.getParameter("sortorder");  
  85.         System.out.println("sortorder=" + sortorder);  
  86.   
  87.         int count = 0;  
  88.         String sql = "";  
  89.         List list = null;  
  90.           
  91.         try {  
  92.             sql = "select count(*) from " + tableName;  
  93.             if (!query.equals("")) {  
  94.                 sql += " where " + qtype + "='" + query + "'";  
  95.             }  
  96.             System.out.println("sql=" + sql);  
  97.             count = db.executeQuery(sql);  
  98.             System.out.println("count=" + count);  
  99.   
  100.             sql = "select * from " + tableName;  
  101.             if (!query.equals("")) {  
  102.                 sql += " where " + qtype + "='" + query + "'";  
  103.             }  
  104.             sql += " order by " + sortname + " " + sortorder;  
  105.             sql += " limit "  
  106.                     + ((Integer.parseInt(pageIndex) - 1) * Integer  
  107.                             .parseInt(pageSize)) + "," + pageSize;  
  108.             System.out.println("sql=" + sql);  
  109.             list = db.executeQueryList(sql);  
  110.             System.out.println("list.size=" + list.size());  
  111.             if (list == null) {  
  112.                 System.out.println("======出错啦======");  
  113.                 return;  
  114.             }  
  115.         } catch (Exception e) {  
  116.             // TODO Auto-generated catch block  
  117.             e.printStackTrace();  
  118.         }  
  119.   
  120.         Map map = new HashMap();  
  121.         map.put("page", pageIndex);  
  122.         map.put("total", count + "");  
  123.         // 数据JSON格式化  
  124.         String json = toJSON(list, map);  
  125.   
  126.         response.getWriter().write(json);  
  127.         response.getWriter().flush();  
  128.         response.getWriter().close();  
  129.   
  130.     }  
  131.   
  132.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  133.             throws ServletException, IOException {  
  134.         doGet(request, response);  
  135.     }  
  136.   
  137.     public void destroy() {  
  138.         System.out.println("--------------关闭链接---------------------");  
  139.         db.closeCurrentConnection();  
  140.     }  
  141.   
  142.     /** 
  143.      * 数据JSON格式化 
  144.      *  
  145.      * @param list 
  146.      * @param pageInfo 
  147.      * @return 
  148.      */  
  149.     private String toJSON(List list, Map map) {  
  150.         List mapList = new ArrayList();  
  151.         for (int i = 0; i < list.size(); i++) {  
  152.             Map cellMap = new HashMap();  
  153.             cellMap.put("id", ((Map) list.get(i)).get("id").toString());  
  154.             cellMap.put("cell", new Object[] {   
  155.                     //"<input type='checkbox'/>",  
  156.                     ((Map) list.get(i)).get("id"),  
  157.                     ((Map) list.get(i)).get("job_name"),  
  158.                     ((Map) list.get(i)).get("work_address"),  
  159.                     ((Map) list.get(i)).get("salary"),  
  160.                     ((Map) list.get(i)).get("date"),  
  161.                     ((Map) list.get(i)).get("language") });  
  162.             mapList.add(cellMap);  
  163.         }  
  164.         map.put("rows", mapList);  
  165.         JSONObject object = new JSONObject(map);  
  166.         return object.toString();  
  167.     }  
  168.   
  169. }  

web.xml配置： 
Xml代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.4"   
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
  6.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  7.   <servlet>  
  8.     <servlet-name>flexGridServlet</servlet-name>  
  9.     <servlet-class>FlexiGridServlet</servlet-class>  
  10.   </servlet>  
  11.   <servlet-mapping>  
  12.     <servlet-name>flexGridServlet</servlet-name>  
  13.     <url-pattern>/flexGridServlet.do</url-pattern>  
  14.   </servlet-mapping>  
  15.     
  16.   <welcome-file-list>  
  17.     <welcome-file>index.jsp</welcome-file>  
  18.   </welcome-file-list>  
  19. </web-app>  


主要步骤就上面那些，其他还有个数据库操作类&JSON操作类， 
例外数据库文件我也生成好了，怎么使用我不用说了吧。 
我把工程全部放上来，该工程绝对可以跑。 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Leo_wl/p/4191338.html