jquery插件FlexiGrid的使用（已更新）

最新推荐文章于 2017-04-10 17:48:51 发布

nuptsv_ice

最新推荐文章于 2017-04-10 17:48:51 发布

阅读量860

点赞数

分类专栏： javascript 文章标签： flexigrid

javascript 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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

更新于2009-11-30
先看一下FlexiGrid的参数

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

先下载FlexiGrid api
[url]http://www.flexigrid.info/ [/url]
怎么导入就不说了，只要注意路径就没问题
新建index.jsp文件：

    Html代码   
    
  
 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>FlexiGrid</title>  
   
 <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link>  
 <script type="text/javascript" src="lib/jquery/jquery.js"></script>  
 <script type="text/javascript" src="flexigrid.pack.js"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){  
     var maiheight = document.documentElement.clientHeight;  
     var w = $("#ptable").width() - 3;  
     var gapTop =  30;  
     var otherpm = 150; //GridHead，toolbar，footer,gridmargin  
     var h = maiheight - gapTop - otherpm;  
   
 var grid=$("#flex1").flexigrid({  
         width: w,  
         height: h,  
         url: 'flexGridServlet.do',  
         dataType: 'json',  
         colModel : [  
             //{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},  
             {display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},  
             {display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},  
             {display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},  
             {display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney},  
             {display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},  
             {display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}                                                                  
             ],  
         buttons : [  
             {name: '添加', bclass: 'add', onpress : toolbar},  
             {name: '删除', bclass: 'delete', onpress : toolbar},  
             {name: '修改', bclass: 'modify', onpress : toolbar},                
             {separator: true}  
             ],  
         searchitems : [  
             {display: '编号', name : 'id', isdefault: true},  
             {display: '工作名称', name : 'job_name'},  
             {display: '工作地址', name : 'work_address'},  
             {display: '语言', name : 'language'}  
             ],  
         errormsg: '发生异常',  
         sortname: "id",  
         sortorder: "desc",  
         usepager: true,  
         title: '信息发布管理',  
         pagestat: '显示记录从{from}到{to}，总数 {total} 条',  
         useRp: true,  
         rp: 10,  
         rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数  
         nomsg: '没有符合条件的记录存在',  
         minColToggle: 1, //允许显示的最小列数  
         showTableToggleBtn: true,  
         autoload: true, //自动加载，即第一次发起ajax请求  
         resizable: false, //table是否可伸缩  
         procmsg: '加载中, 请稍等 ...',  
         hideOnSubmit: true, //是否在回调时显示遮盖  
         blockOpacity: 0.5,//透明度设置  
         rowbinddata: true,  
         showcheckbox: true  
         //gridClass: "bbit-grid"//样式  
     });  
       
     //$('.trSelected',grid).parent().removeClass("trSelected");  
       
     function toolbar(com,grid){  
         if (com=='删除'){  
             ${"action"}.value="delete";  
             if($('.trSelected',grid).length==0){  
                 alert("请选择要删除的数据");  
             }else{  
                 if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){  
                      var  ids ="";  
                      for(var i=0;i<$('.trSelected',grid).length;i++){  
                         ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id  
                       }  
                       idsids=ids.substring(1);  
                       $.ajax({  
                             type: "POST",  
                             url: "flexGridServlet.do?actionaction="+${"action"}.value,  
                             data: "id="+ids,  
                             dataType:"text",  
                             success: function(msg){  
                                 if(msg=="success"){  
                                     $("#flex1").flexReload();  
                                 }else{  
                                     alert("有错误发生,msg="+msg);  
                                 }  
                             },  
                             error: function(msg){  
                                 alert(msg);  
                             }  
                         });  
                 }  
            }  
         }else if (com=='添加'){  
             ${"action"}.value="add";  
             alert("flexGridServlet.do?actionaction="+${"action"}.value);  
             window.location.href="flexGridServlet.do?action="+${"action"}.value;  
         }else if (com=='修改'){  
             ${"action"}.value="modify";  
             if($(".trSelected").length==1){  
                 alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());  
                 window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();  
                   
             }else if($(".trSelected").length>1){  
                 alert("请选择一个修改,不能同时修改多个");  
             }else if($(".trSelected").length==0){  
                 alert("请选择一个您要修改的记录")  
             }  
                
             //$("#flex1").flexReload({});  
         }  
     }  
     function formatMoney(value, pid) {  
          return "￥" + parseFloat(value).toFixed(2);  
     }  
       
               
 });  
 </script>  
 <style>  
           
    .flexigrid div.fbutton .add  
        {  
            background: url(css/images/add.png) no-repeat center left;  
        }  
   
    .flexigrid div.fbutton .delete  
        {  
            background: url(css/images/close.png) no-repeat center left;  
        }  
    .flexigrid div.fbutton .modify  
        {  
            background: url(css/images/modify.png) no-repeat center left;  
        }  
       
 </style>  
 </head>  
 <body>  
 <div id="ptable" style="margin:10px">  
     <table id="flex1" style="display:none"></table>  
 </div>    
 <input id="action" type="hidden" name="action" value="null" />  
 <script>  
           
 </script>  
   
 </body>  
 </html>  

servlet代码：

    Java代码   
    
  
 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.sql.SQLException;  
 import java.util.*;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 public class FlexiGridServlet extends HttpServlet {  
     private DBConnection db;  
   
     public void init() throws ServletException {  
         System.out.println("--------------开始链接---------------------");  
         db = new DBConnection();// 打开链接  
         try {  
             db.getCurrentConnection();  
         } catch (SQLException e1) {  
         }  
         System.out.println("--------------打开链接成功---------------------");  
     }  
   
     public void doGet(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
   
         // 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");  
   
         String action = request.getParameter("action");  
         System.out.println("action=" + action);  
         String tableName = "job_info1";  
          if ("add".equals(action)) {  
             System.out.println("--------------------add--------------------");  
             return;  
         } else if ("delete".equals(action)) {  
             System.out.println("--------------------delete------------------");  
             String ids=request.getParameter("id");  
             System.out.println("ids="+ids);  
 //          String[] id=ids.split(",");  
             String sql = "delete from "+tableName+" where id in ("+ids+")";  
               
             System.out.println("sql="+sql);  
             try {  
                 db.executeUpdate(sql, null);  
             } catch (Exception e) {  
                 // TODO Auto-generated catch block  
                 e.printStackTrace();  
             }  
             System.out.println("delete success!!!");  
             response.getWriter().write("success");  
             response.getWriter().flush();  
             response.getWriter().close();  
             return;  
         } else if ("modify".equals(action)) {  
             System.out.println("--------------------modify-------------------");  
             return;  
         } else {  
   
         }  
          System.out.println("--------------------下来了-------------------");  
           
         // 获得当前页数  
         String pageIndex = request.getParameter("page");  
         System.out.println("pageIndex=" + pageIndex);  
         // 获得每页数据最大量  
         String pageSize = request.getParameter("rp");  
         System.out.println("pageSize=" + pageSize);  
         // 获得模糊查询文本输入框的值  
         String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");  
                   
         System.out.println("query=" + query);  
         // 获得模糊查询条件  
         String qtype = request.getParameter("qtype");  
         System.out.println("qtype=" + qtype);  
         // 排序的字段  
         String sortname = request.getParameter("sortname");  
         System.out.println("sortname=" + sortname);  
         // desc or asc  
         String sortorder = request.getParameter("sortorder");  
         System.out.println("sortorder=" + sortorder);  
   
         int count = 0;  
         String sql = "";  
         List list = null;  
           
         try {  
             sql = "select count(*) from " + tableName;  
             if (!query.equals("")) {  
                 sql += " where " + qtype + "='" + query + "'";  
             }  
             System.out.println("sql=" + sql);  
             count = db.executeQuery(sql);  
             System.out.println("count=" + count);  
   
             sql = "select * from " + tableName;  
             if (!query.equals("")) {  
                 sql += " where " + qtype + "='" + query + "'";  
             }  
             sql += " order by " + sortname + " " + sortorder;  
             sql += " limit "  
                     + ((Integer.parseInt(pageIndex) - 1) * Integer  
                             .parseInt(pageSize)) + "," + pageSize;  
             System.out.println("sql=" + sql);  
             list = db.executeQueryList(sql);  
             System.out.println("list.size=" + list.size());  
             if (list == null) {  
                 System.out.println("======出错啦======");  
                 return;  
             }  
         } catch (Exception e) {  
             // TODO Auto-generated catch block  
             e.printStackTrace();  
         }  
   
         Map map = new HashMap();  
         map.put("page", pageIndex);  
         map.put("total", count + "");  
         // 数据JSON格式化  
         String json = toJSON(list, map);  
   
         response.getWriter().write(json);  
         response.getWriter().flush();  
         response.getWriter().close();  
   
     }  
   
     public void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
         doGet(request, response);  
     }  
   
     public void destroy() {  
         System.out.println("--------------关闭链接---------------------");  
         db.closeCurrentConnection();  
     }  
   
     /** 
      * 数据JSON格式化 
      *  
      * @param list 
      * @param pageInfo 
      * @return 
      */  
     private String toJSON(List list, Map map) {  
         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").toString());  
             cellMap.put("cell", new Object[] {   
                     //"<input type='checkbox'/>",  
                     ((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("salary"),  
                     ((Map) list.get(i)).get("date"),  
                     ((Map) list.get(i)).get("language") });  
             mapList.add(cellMap);  
         }  
         map.put("rows", mapList);  
         JSONObject object = new JSONObject(map);  
         return object.toString();  
     }  
   
 }  

web.xml配置：

    Xml代码   
    
  
 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app version="2.4"   
     xmlns="http://java.sun.com/xml/ns/j2ee"   
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
   <servlet>  
     <servlet-name>flexGridServlet</servlet-name>  
     <servlet-class>FlexiGridServlet</servlet-class>  
   </servlet>  
   <servlet-mapping>  
     <servlet-name>flexGridServlet</servlet-name>  
     <url-pattern>/flexGridServlet.do</url-pattern>  
   </servlet-mapping>  
     
   <welcome-file-list>  
     <welcome-file>index.jsp</welcome-file>  
   </welcome-file-list>  
 </web-app>  