• 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操作类， 
    例外数据库文件我也生成好了，怎么使用我不用说了吧。 
    我把工程全部放上来，该工程绝对可以跑。 
  • 相关阅读:
    Python学习1——语法
    Java正则表达式：Pattern类和Matcher类
    BufferedReader 是缓冲字符输入流
    asm 01 开发环境
    vim一个不使用插件的基本配置
    sublime
    一些东西
    jshint 一些选项(转载)
    prototype 和__proto__
    vim 基本使用
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/4191338.html
Copyright © 2020-2023  润新知