jquery Flexigrid的使用

引用:http://www.iteye.com/topic/414611

首先.去下载FlexGrid http://www.flexigrid.info/ 
下载完成后.解压开有__MACOSX和flexigrid两个文件夹 
主要使用flexigrid里面的文件 
flexgrid文件夹下文件如下 
 
.. 
准备工作完成后 
真正工作开始了 
在MyEclipse下新建Web project.. 
把flexigrid包下所有的文件拷贝到WebRoot/下 
新建*.jsp页面 
body体中 
加入 

Jsp代码  收藏代码
  1. <table id="flex1" style="display:none"></table>  


做完flexigrid控件的显示容器. 没有则不会显示控件 
页面引入控件代码 

Javascript代码  收藏代码
  1. <table id="flex1" style="display:none"></table>  
  2.             <input id="hidden" type="hidden" name="hidden" value="null" />  
  3.             <script>  
  4.             $("#flex1").flexigrid  
  5.             (  
  6.             {  
  7.             url: '../ReleaseInfoServlet?hidden=manage',  
  8.             dataType: 'json',  
  9.             colModel : [  
  10.                 {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},  
  11.                 {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},  
  12.                 {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},  
  13.                 {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},  
  14.             <!--{display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},-->  
  15.                 {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},  
  16.                 {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}                                                                
  17.                 ],  
  18.             buttons : [  
  19.                 {name: '添加', bclass: 'add', onpress : button},  
  20.                 {name: '删除', bclass: 'delete', onpress : button},  
  21.                 {name: '修改', bclass: 'modify', onpress : button},                 
  22.                 {separator: true}  
  23.                 ],  
  24.             searchitems : [  
  25.                 {display: '信息编号', name : 'RINO', isdefault: true},  
  26.                 {display: '信息标题', name : 'RITITLE'},  
  27.                 {display: '信息类别', name : 'IC.ICNAME'},  
  28.                 {display: '发布作者', name : 'RIAUTHOR'}  
  29.                 ],  
  30.             sortname: "RINO",  
  31.             sortorder: "desc",  
  32.             usepager: true,  
  33.             title: '信息发布管理',  
  34.             useRp: true,  
  35.             rp: 20,  
  36.             showTableToggleBtn: true,  
  37.             width: 780,  
  38.             height: 300  
  39.             }  
  40.             );  
  41.               
  42.             function button(com,grid)  
  43.             {  
  44.                 if (com=='删除')  
  45.                     {  
  46.                         ${"hidden"}.value="delete";  
  47.                         if($('.trSelected',grid).length==0){  
  48.                             alert("请选择要删除的数据");  
  49.                         }else{  
  50.                             if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))  
  51.                             {  
  52.                               var  id ="";  
  53.                              for(var i=0;i<$('.trSelected',grid).length;i++){  
  54.                                 if(i==$('.trSelected',grid).length-1){  
  55.                                     id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();  
  56.                                 } else {  
  57.                                     id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";  
  58.                                 }  
  59.                               }  
  60.                               window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;  
  61.                           }  
  62.                        }  
  63.                     }  
  64.                 else if (com=='添加')  
  65.                     {  
  66.                         ${"hidden"}.value="add";  
  67.                         window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;  
  68.                     }  
  69.                 else if (com=='修改')  
  70.                 {  
  71.                     ${"hidden"}.value="modify";  
  72.                     if($(".trSelected").length==1){  
  73.                         window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();  
  74.                     }else if($(".trSelected").length>1){  
  75.                         alert("请选择一个修改,不能同时修改多个");  
  76.                     }else if($(".trSelected").length==0){  
  77.                         alert("请选择一个您要修改的新闻信息")  
  78.                     }  
  79.                 }  
  80.             }    


flexgrid参数介绍: 

Javascript代码  收藏代码
  1. height: 200, //flexigrid插件的高度，单位为px  
  2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算  
  3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  
  4. novstripe: false,  
  5. minwidth: 30, //列的最小宽度  
  6. minheight: 80, //列的最小高度  
  7. resizable: true, //是否可伸缩  
  8. url: false, //ajax方式对应的url地址  
  9. method: ‘POST’, // 数据发送方式  
  10. dataType: ‘xml’, // 数据加载的类型  
  11. errormsg: ‘Connection Error’,//错误提升信息  
  12. usepager: false, //是否分页  
  13. nowrap: true, //是否不换行  
  14. page: 1, //默认当前页  
  15. total: 1, //总页面数  
  16. useRp: true, //是否可以动态设置每页显示的结果数  
  17. rp: 15, // 每页默认的结果数  
  18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数  
  19. title: false,//是否包含标题  
  20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式  
  21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息  
  22. query: ”,//搜索查询的条件  
  23. qtype: ”,//搜索查询的类别  
  24. nomsg: ‘No items’,//无结果的提示信息  
  25. minColToggle: 1, //minimum allowed column to be hidden  
  26. showToggleBtn: true, //show or hide column toggle popup  
  27. hideOnSubmit: true,//隐藏提交  
  28. autoload: true,//自动加载  
  29. blockOpacity: 0.5,//透明度设置  
  30. onToggleCol: false,//当在行之间转换时  
  31. onChangeSort: false,//当改变排序时  
  32. onSuccess: false,//成功后执行  
  33. onSubmit: false // 调用自定义的计算函数   



注意: 
Head标签必须要引入 

Jsp代码  收藏代码
  1. <link rel="stylesheet" href="css/flexigrid/flexigrid.css"  
  2.             type="text/css"></link>  
  3. <script type="text/javascript" src="lib/jquery/jquery.js"></script>  
  4. <script type="text/javascript" src="js/flexigrid.js"></script>  


jquery.js、flexigrid.css、flexigrid.js 
三个主要文件 
自己要根据自己的文件路径.去引入css\js文件 
页面完成启动tomcat测试页面会不会显示控件. 
应该是没有问题的,只是没有数据 
 
主要的还是后台的操作 
这里由于时间关系只介绍select方法了. 
可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么? 

Java代码  收藏代码
  1. response.setContentType("text/html;charset=UTF-8");  
  2. ReleaseInfoDao rid = new ReleaseInfoDao();  
  3. String hidden = request.getParameter("hidden");  
  4. PrintWriter out = response.getWriter();  


首先接收路径传过来的hidden值. 
因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此. 

Java代码  收藏代码
  1. if(hidden.equals("manage")){  
  2. //          获得当前页数  
  3.             String pageIndex = request.getParameter("page");  
  4. //          获得每页数据最大量  
  5.             String pageSize = request.getParameter("rp");  
  6. //          获得模糊查询文本输入框的值  
  7.             String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");  
  8. //          获得模糊查询条件  
  9.             String qtype = request.getParameter("qtype");  
  10.             if(query==""||("").equals(query)){  
  11.                 Map pageInfo = new HashMap();  
  12.                 pageInfo.put("page", pageIndex);  
  13.                 pageInfo.put("total", rid.getReleaseInfoCount());  
  14. //              数据JSON格式化  
  15.                 String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);  
  16. //              response相关处理  
  17.                 response.setContentType("html/txt");  
  18.                 response.setCharacterEncoding("utf-8");     
  19.                 response.setHeader("Pragma", "no-cache");     
  20.                 response.setHeader("Cache-Control", "no-cache, must-revalidate");     
  21.                 response.setHeader("Pragma", "no-cache");     
  22.                 try {     
  23.                     response.getWriter().write(jsonStr);     
  24.                     response.getWriter().flush();     
  25.                     response.getWriter().close();  
  26.                 } catch (IOException e) {     
  27.                     e.printStackTrace();     
  28.                 }  
  29.             }else{  
  30.                 Map pageInfo = new HashMap();  
  31.                 pageInfo.put("page", pageIndex);  
  32.                 pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));  
  33. //              数据JSON格式化  
  34.                 String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(pageSize), qtype, query), pageInfo);  
  35. //              response相关处理  
  36.                 response.setContentType("html/txt");  
  37.                 response.setCharacterEncoding("utf-8");     
  38.                 response.setHeader("Pragma", "no-cache");     
  39.                 response.setHeader("Cache-Control", "no-cache, must-revalidate");     
  40.                 response.setHeader("Pragma", "no-cache");     
  41.                 try {     
  42.                     response.getWriter().write(jsonStr);     
  43.                     response.getWriter().flush();     
  44.                     response.getWriter().close();  
  45.                 } catch (IOException e) {     
  46.                     e.printStackTrace();     
  47.                 }  
  48.             }  
  49.         }  


可以看到许多request.getParameter("***"); 
是后去flexigrid控件的一些参数. 
大家可以到flexigrid.js文件里面看到这些参数. 
page//获取当前的页数. 
rp//每页显示多少行数据 

Javascript代码  收藏代码
  1. rp: 20,  


query//点击放大镜出现搜索功能,是Input文本框的值 
qtype//是搜索功能后面的select的值 
根据query的操作判断是模糊查询还是全部查询数据. 
Servlet全部代码看完了. 
看看.Dao层的数据层的代码吧. 
主要引用Dao的代码如下 
主要代码1. 

Java代码  收藏代码
  1. pageInfo.put("total", rid.getReleaseInfoCount());  
  2. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);  


rid为ReleaseInfoDao的实例对象(发布信息表) 
首先我们来看getReleaseInfoCount()方法 

Java代码  收藏代码
  1. /** 
  2.      * 获得信息表所有的数据量, 
  3.      * 并返回数据个数 
  4.      * @return 
  5.      */  
  6.     public long getReleaseInfoCount(){  
  7.         long count =0l;  
  8.         QueryRunner queryRunner = new QueryRunner();  
  9.         String query = "select count(*) as num from TB_ReleaseInfo";  
  10.         try {  
  11.             Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());  
  12.             count = Long.parseLong(map.get("num").toString());  
  13.         } catch (SQLException e) {  
  14.             e.printStackTrace();  
  15.         } finally {  
  16.             DBConnection.close();  
  17.         }  
  18.         return count;  
  19.     }  


主要代码2. 

Java代码  收藏代码
  1. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);  


这里看到返回的是json格式的数据 
主要Dao层方法为creReleaseInfoJSON();getReleaseInfo(int pageIndex,int pageSize);方法 
getReleaseInfo代码如下 

Java代码  收藏代码
  1. /** 
  2.      * 分页查询 
  3.      * @param pageIndex 
  4.      * @param pageSize 
  5.      * @return 
  6.      */  
  7.     public List getReleaseInfo(int pageIndex,int pageSize){  
  8.         List releaseInfoList = new ArrayList();  
  9.         int beginIndex = (pageIndex-1)*pageSize;  
  10.         int endIndex = pageIndex*pageSize;  
  11.         QueryRunner queryRunner = new QueryRunner();  
  12.         String query = "select * from (" +  
  13.                 "select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +  
  14.                 "from (" +  
  15.                 "select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +  
  16.                 " from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +  
  17.                 "order by ri.rino desc) where rownum<=?) where rn>?";  
  18.         try {  
  19.             releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),new Integer(beginIndex)},new MapListHandler());  
  20.         } catch (SQLException e) {  
  21.             e.printStackTrace();  
  22.         } finally {  
  23.             DBConnection.close();  
  24.         }  
  25.         return releaseInfoList;  
  26.     }  


上述方法的SQL为Oracle的分页查询.MS SQL、MySql等.其他数据库不适用. 
creReleaseInfoJSON代码如下: 

Java代码  收藏代码
  1. /** 
  2.      * 数据JSON格式化 
  3.      * @param list 
  4.      * @param pageInfo 
  5.      * @return 
  6.      */  
  7.     public String creReleaseInfoJSON(List list,Map pageInfo){  
  8.         String jsonStr = "";  
  9.         List mapList = new ArrayList();  
  10.         for(int i=0;i<list.size();i++){  
  11.             Map cellMap = new HashMap();  
  12.             cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());  
  13.             cellMap.put("cell", new Object[]{  
  14.                     ((Map)list.get(i)).get("RINo"),  
  15.                     ((Map)list.get(i)).get("RITitle"),  
  16.                     ((Map)list.get(i)).get("ICName"),  
  17.                     ((Map)list.get(i)).get("RIHotpoint"),  
  18.                     ((Map)list.get(i)).get("RIDATE"),  
  19.                     ((Map)list.get(i)).get("RIAuthor")  
  20.             });  
  21.             mapList.add(cellMap);  
  22.         }  
  23.         pageInfo.put("rows", mapList);  
  24.         JSONObject object = new JSONObject(pageInfo);  
  25.         jsonStr = object.toString();  
  26.         return jsonStr;  
  27.     }  


返回的JSON格式的数据: 

Java代码  收藏代码
  1. jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}  


JSONObject代码在下面的附件里有. 
还有需要解释的地方. 
大家可以看到dao 
并没有 
Connection 
PreparedStatement 
ResultSet 
等对象. 
我操作数据使用的是. 
commons-dbutils-1.1.jar(下面的附件中也包含有.) 

整体的介绍完了. 
可以说比较考验个人读代码的能力.个人细心的能力. 

posted @ 2012-03-15 14:50  镇水古月  阅读(1618)  评论(1)  编辑  收藏  举报