目錄：
一、概述
二、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使用步驟 |
首先給大家介紹最常用的資料展示元件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();
}); 運作效果如下：
源碼下載下傳見：百度雲代碼分享
作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/
本文版權歸煙台傑瑞教育科技有限公司和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。