LigerUI真假分页以及过滤查询功能

原博客地址：http://blog.csdn.net/yuebinghaoyuan/article/details/22042557?utm_source=tuicool&utm_medium=referral

前端时间写过ligerUI页面框架显示JSON数据，最近博友问的最多的问题是ligerUI中过滤条件where属性的使用以及分页显示的问题。

  为了答疑同时为了总结，做了相应的测试demo，现在写出来分享一下。

  首先ligerUI中显示的字段是后台JSON中相应的字段，为了调错，可以在相应的Action或Servlet中把json对应的字符串打印出来。

  显示的字段有了，那具体的数据源呢？

  ligerUI帮助文档中的属性，建议大家好好看一遍，这个帮助文档还是蛮全的，也挺容易上手的。

  属性—url：代表访问服务器，每次的grid都是通过ajax访问服务器返回相应的JSON对象。

  属性—data：代表来自客户端的数据，客户端已经保存好的JSON数据。

  api中还有一个属性—dataAction：提交方式，也就是本地或服务器。默认情况下是server。选择local则说明在本地客户端分页。

  其实看ligerUIdemo例子，基本上都没有用到dataAction这个属性。

  关键在于url和data属性。url：相当于server，data：相应于local。

  关于分页问题：

  data分页问题：

  若使用data属性，data接受的是一个ligerUI对应的JSON格式，如下：

[html]  view plain ?

1. {"Rows":[{"RN":1,"UUID":50095,"LOGIN_NAME":"admin","USER_NAME":"admin","CDATE":{"date":12,"day":1,"hours":13,"minutes":43,"month":10,"nanos":0,"seconds":36,"time":1352699016000,"timezoneOffset":-480,"year":112}},{"RN":2,"UUID":50391,"LOGIN_NAME":"ccc","USER_NAME":"ccc","PASSWORD":"E0323A9039ADD2978BF5B49550572C7C","CDATE":{"date":22,"day":5,"hours":17,"minutes":56,"month":10,"nanos":0,"seconds":27,"time":1385114187000,"timezoneOffset":-480,"year":113}}],"Total":2}  

  可以注意，若后台date类型，自动给你拆分成json对象了。

  若使用data属性，其余可以什么都不用配置，ligerUI就可以自动分页了。默认情况下ligerUI中pageSize=10，当然可以自行设置。

  那一般情况下，如何使用data属性呢？

  思路如下：

  首先可以通过ajax获取到数据保存到一个数组中，然后再把这个数据赋值给data属性即可。

  示例如下：

[html]  view plain ?

1. var grid=null;  
2. var griddata=null;  
3. $(function(){  
4.   $.ajax({  
5.   url: path+'/rcp/rml/tesgligerui.do',  
6.   dataType: 'json',  
7.   type: 'POST',  
8.   success: function (result) {  
9.     griddata=result;  
10.     setgrid(griddata);  
11.   }  
12.   });  
13. });  
14. function setgrid(griddata){  
15.   grid = $("#maingrid").ligerGrid({  
16.   columns: [  
17.   { name: 'UUID', display: '序号', width: 85 },  
18.   { name: 'LOGIN_NAME', display: '登录名', width: 120 },  
19.   { name: 'USER_NAME', display: '用户名', width: 80 }  
20.   ],  
21.   data:griddata,  
22.   pageSize: 10,   
23.   rownumbers: true  
24.   });  
25.    }  

  关于过滤条件where属性：

  经过本人测试，where属性只能用在data属性中，因为where属性是在本地数据中过滤。

  具体代码如下：

[html]  view plain ?

1. var grid=null;  
2. var griddata=null;  
3. $(function(){  
4.   $.ajax({  
5.   url: path+'/rcp/rml/tesgligerui.do',  
6.   dataType: 'json',  
7.   type: 'POST',  
8.   success: function (result) {  
9.     griddata=result;  
10.     setgrid(griddata);  
11.   }  
12.   });  
13. });  
14. function setgrid(griddata){  
15.   grid = $("#maingrid").ligerGrid({  
16.   columns: [  
17.   { name: 'UUID', display: '序号', width: 85 },  
18.   { name: 'LOGIN_NAME', display: '登录名', width: 120 },  
19.   { name: 'USER_NAME', display: '用户名', width: 80 }  
20.   ],  
21.   data:griddata,  
22.   pageSize: 10,   
23.   rownumbers: true,  
24.   where:f_getWhere()  
25.   });  
26.    }  
27.  function f_getWhere() {  
28.   if (!grid) {return null};  
29.   var clause = function (rowdata, rowindex) {  
30.   var username = $('#txtKey').val();  
31.   return ((rowdata.USER_NAME.indexOf(username) > -1));  
32.   };  
33.   return clause;  
34.   }  
35.    //查询按钮，根据文本框中用户输入的用户名查询  
36.    function fsearch() {  
37.      grid.options.data = $.extend(true, {}, griddata);//必须这么写  
38.      grid.loadData(f_getWhere());  
39.   }   

  url分页问题：

  若使用url属性，若想到达上述分页功能，后台必须人为的分页，也就是真分页。

  api中参数 pagesizeParmName提供给server中pagesize每页大小，pageParmName提供给server中的page当前页，record则是返回到页面的Total总数。

  提供给server端，则是人为接受以及使用此参数进行sql分页。

  具体的代码：

  js中的代码如下：

[html]  view plain ?

1. grid = $("#maingrid").ligerGrid({  
2.   columns: [  
3.   { name: 'UUID', display: '序号', width: 85 },  
4.   { name: 'LOGIN_NAME', display: '登录名', width: 120 },  
5.   { name: 'USER_NAME', display: '用户名', width: 80 }  
6.   ],  
7.   url: path+'/rcp/rml/tesgligerui.do',  
8.   pageSize: 10,   
9.   rownumbers: true  
10.   });  

  相应的sql语句：

[html]  view plain ?

1.  SELECT T.*  
2.  FROM (SELECT ROWNUM RN, T.* FROM (SELECT * FROM LEAP_USER) T) T  
3. WHERE 1=1 {?and T.RN BETWEEN  #start# AND #end#}   

  至于这个问号以及花括号大家可以不用关心，这个是我项目中特定框架。其实sql就是真分页方式的一种，只要穿进去第几页到第几页即可。

  那相应的action代码：

  主要获取数据库个数，记得转成double，否则页面的总页数会少一页，若不能整除的话。

  Map params=new HashMap();

  double records=testLigerService.selectLiger(params).size();

  从客户端获取当前的页号page，每页大小pagesize【注意大小写，否则获取不到，因为这个是ligerUI中特定参数】。

  String pageString= request.getParameter("page");

  int pageNo=1;

  if(pageString!=null){

  pageNo =Integer.parseInt(pageString);

  }

  String pagesizeString=request.getParameter("pagesize");

  int pagesize=10;

  if(pagesizeString!=null){

 pagesize=Integer.parseInt(pagesizeString);

  }

  然后计算需要传入sql中begin与end个数，然后获取相应的记录list

  params.put("start", (pageNo-1)*pagesize+1);

  params.put("end", pageNo*pagesize);

  list=testLigerService.selectLiger(params);

  把获取的list以及总记录数传递到ligerUI中，这样页面就可以显示出一共几页，注意一定要传入Total属性。可以按照如下形式，由map转换成相应的json对象   

[html]  view plain ?

1. Map map = new HashMap();  
2. map.put("Rows", list);  
3. map.put("Total", records);  
4. JSONObject jsonObject = JSONObject.fromObject(map);  
5. response.setCharacterEncoding("utf-8");  
6. response.getWriter().write(jsonObject.toString());  
7. System.out.println(jsonObject);  

  其实真分页思路，跟前台框架无关，只不过不同的框架，接受参数以及返回参数的格式不同而已。