Blog / 阅读

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

by admin on 2014-03-25 18:29:58 in ,



  前端时间写过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);


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


写评论

相关文章

上一篇:JS Charts,javascript生成曲线图、柱状图、饼状图、走势图的JS插件。

下一篇:HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串?

评论

写评论

* 必填.

分享

栏目

赞助商


热门文章

Tag 云