前端時間寫過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);

  其實真分頁思路，跟前臺框架無關，只不過不同的框架，接受引數以及返回引數的格式不同而已。