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

  

  前端时间写过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格式，如下：

{"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属性即可。

  示例如下：

  var grid=null;
  var griddata=null;
  $(function(){
    $.ajax({
    url: path+'/rcp/rml/tesgligerui.do',
    dataType: 'json',
    type: 'POST',
    success: function (result) {
      griddata=result;
      setgrid(griddata);
    }
    });
  });
  function setgrid(griddata){
    grid = $("#maingrid").ligerGrid({
    columns: [
    { name: 'UUID', display: '序号', width: 85 },
    { name: 'LOGIN_NAME', display: '登录名', width: 120 },
    { name: 'USER_NAME', display: '用户名', width: 80 }
    ],
    data:griddata,
    pageSize: 10, 
    rownumbers: true
    });
     }

  关于过滤条件where属性：

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

  具体代码如下：

  var grid=null;
  var griddata=null;
  $(function(){
    $.ajax({
    url: path+'/rcp/rml/tesgligerui.do',
    dataType: 'json',
    type: 'POST',
    success: function (result) {
      griddata=result;
      setgrid(griddata);
    }
    });
  });
  function setgrid(griddata){
    grid = $("#maingrid").ligerGrid({
    columns: [
    { name: 'UUID', display: '序号', width: 85 },
    { name: 'LOGIN_NAME', display: '登录名', width: 120 },
    { name: 'USER_NAME', display: '用户名', width: 80 }
    ],
    data:griddata,
    pageSize: 10, 
    rownumbers: true,
    where:f_getWhere()
    });
     }
   function f_getWhere() {
    if (!grid) {return null};
    var clause = function (rowdata, rowindex) {
    var username = $('#txtKey').val();
    return ((rowdata.USER_NAME.indexOf(username) > -1));
    };
    return clause;
    }
     //查询按钮，根据文本框中用户输入的用户名查询
     function fsearch() {
       grid.options.data = $.extend(true, {}, griddata);//必须这么写
       grid.loadData(f_getWhere());
    } 

  url分页问题：

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

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

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

  具体的代码：

  js中的代码如下：

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

  相应的sql语句：

   SELECT T.*
   FROM (SELECT ROWNUM RN, T.* FROM (SELECT * FROM LEAP_USER) T) T
  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对象   

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

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