http://www.cnblogs.com/jerehedu/p/4218560.html
首先給大家介紹最常用的數據展示組件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展示數據
| 三、使用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();
});
運行效果如下：
