Jquery插件FLexiGrid完全配置

       首先.去下载FlexGrid http://www.flexigrid.info/ ，下载完成后.解压开有__MACOSX和flexigrid两个文件夹 ，主要使用flexigrid里面的文件 
      flexgrid文件夹下文件如下 ：

 
    准备工作完成后 真正工作开始了 在MyEclipse下新建Webproject.. 把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(intpageIndex,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(下面的附件中也包含有.) 

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

上述代码.应该是没有问题的. 
因为我测试一点问题没有. 
可能是因为您配置或者书写代码的问题.. 
可能会出现这样那样的困难. 
也请不要进行人身攻击. 
在做这个的时候.我也碰到许多问题。 
耐心些。 没有解决不了的问题. 

鄙人写代码很烂. 各位大牛们 就不要拍砖了. 凑活看就行了. 

如果什么问题. 
请到本人博客留言. 
只要是本人会的 
定会尽力解决. 

花费半个点的功夫.整理一下.. 各位笑纳了. 
遗留问题:点击标题.自动排序的问题.. 如果哪位哥们解决了.. 请在本人博客留言. 
十分感谢您的帮助 

Ps: 很感谢 ayeah 同学.. 
   在此以前. 一直认为是flexgrid.实际正确的拼写为flexigrid. 十分低级的错误. 
   呵呵. 还望各位同学见谅. 
项目源码:请到这里下载JQuery 插件FlexiGrid 之完全配置与使用-续{附Demo+Data}