目錄：

一、概述

二、Grid使用步驟

三、使用Grid展示數據

四、源碼下載

　　在開發web信息管理系統時，使用Web前端框架可以幫助我們快速搭建一組風格統一的界面效果，而且能夠解決大多數瀏覽器兼容問題，提升開發效率。比較常見的有extjs、easyui、MiniUI、JQuery UI、DWZ、Liger UI、QUI等等，這些框架中有國外的，有國內的，有收費的、也有開源免費的，他們有各自的優勢，也有各自的不足。在這里給大家介紹Liger UI框架中一些常見組件的用法。

　　LigerUI演示地址：http://www.ligerui.com

　　LigerUI API地址：http://api.ligerui.com/

　　首先給大家介紹最常用的數據展示組件Grid，使用步驟如下：

　　1、頁面中正確引入樣式文件及相應組件

 <link href="<%=request.getContextPath()%>/ui/lib/ligerUI/skins/Aqua/CSS/ligerui-all.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/jquery/jquery-1.3.2.min.js"></script><script type="text/Javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/core/base.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script>

　　2、在body中添加div

<div id="maingrid"></div>

　　3、編寫js代碼

<script type="text/javascript">          $(function(){              $("#maingrid").ligerGrid({                  width:600,                  columns:[                      {display:"學號",name:"stuNo"},                      {display:"姓名",name:"stuName"},                      {display:"性別",name:"stuSex"},                      {display:"年齡",name:"stuAge"}                  ]              });          });      </script>

　　發布應用后可查看效果如下：

　　以上只是grid簡單的構建過程，下面看看如何使用grid展示數據

　　ligerGrid顯示數據采用 json對象，我們只需要給grid的url屬性指定一個后臺地址，默認情況下grid會自動發送異步請求向指定程序請求數據。注意默認情況下grid要求的json數據格式如下：

{Rows:[{},{}],Total:2};

　　我們可以通過指定ligerGrid的root和record屬性來改變數據源屬性和數據總記錄屬性。

　　以下代碼為后臺加載數據的Serlvet的關鍵代碼，如要用來構建grid需要的json格式的字符串數據。

resp.setContentType("text/html;charset=utf-8");        JSONObject obj = new JSONObject();        List<Map<String, String>> list =initStudentData();        obj.put("Rows", list);        obj.put("Total", list.size());        PRintWriter out = resp.getWriter();        out.write(obj.toString());        out.close(); 

　　修改js代碼如下：

var grid=$("#maingrid").ligerGrid({                  width:600,                  columns:[                      {display:"學號",name:"stuNo"},                      {display:"姓名",name:"stuName"},                      {display:"性別",name:"stuSex"},                      {display:"年齡",name:"stuAge"}                  ],                  //值為local，數據在客戶端進行分頁                  dataAction:"local",                  //數據請求地址                  url:"main/studentServlet.action?reqCode=findStudents",                  //數據書否分頁，默認為true                  usePager:true,                  pageSize:"8",//分頁頁面大小                  pageSizeOptions:[8,16,32]//可指定每頁頁面大小              });

　　執行效果如下：

　　在這里要注意，我們在實際應用中采用的分頁方式基本上都是后臺分頁，即在數據庫中分頁，這里主要是演示，直接采用了客戶端分頁，默認情況下dataAction的值為server即為服務器分頁。

　　從效果圖中我們可以看到，性別列顯示的內容是代碼，顯然不符合要求，ligerGrid為我們提供了單元格渲染器，可以幫助我們完成我們想要的效果。

　　繼續修改grid 列屬性如下：

columns:[                      {display:"學號",name:"stuNo"},                      {display:"姓名",name:"stuName"},                      {display:"性別",name:"stuSex",                          render:function(rowData){                              if(rowData.stuSex=="0"){                                  return "男";                              }else{                                  return "女";                              }                          }                      },                      {display:"年齡",name:"stuAge",                          render:function(rowData){                              if(parseInt(rowData.stuAge)<22){                                  return "<span style='color:red'>"+rowData.stuAge+"</span>";                              }                              return rowData.stuAge;                          }                                            }                  ] 

　　運行程序，效果如下：

　　由上可知利用render我們可以完成自定義單元格。

　　當數據大用戶多的時候，我們不希望用戶打開頁面立即顯示數據，這樣會服務器造成不小的壓力，而是當用戶輸入查詢條件并點擊查詢后，在進行加載數據。

　　修改js代碼如下可以實現根據輸入條件加載數據：

  var grid=$("#maingrid").ligerGrid({                  width:600,                  columns:[                      {display:"學號",name:"stuNo"},                      {display:"姓名",name:"stuName"},                      {display:"性別",name:"stuSex",                          render:function(rowData){                              if(rowData.stuSex=="0"){                                  return "男";                              }else{                                  return "女";                              }                          }                      },                      {display:"年齡",name:"stuAge",                          render:function(rowData){                              if(parseInt(rowData.stuAge)<22){                                  return "<span style='color:red'>"+rowData.stuAge+"</span>";                              }                              return rowData.stuAge;                          }                                            }                  ]                                });                            $("#btnLoad").click(function(){                  var name=$("#stuname").val();                  grid.set({                      //值為local，數據在客戶端進行分頁                      dataAction:"local",                      //數據請求地址                      url:"main/studentServlet.action?reqCode=findStudents",                      //數據書否分頁，默認為true                      usePager:true,                      pageSize:"8",//分頁頁面大小                      pageSizeOptions:[8,16,32],//可指定每頁頁面大小                      parms:[{name:"stuname",value:name}]                  });                  grid.loadData();              });

　　運行效果如下：