前端jsp文件代碼：
<link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script type="text/javascript">
var grid = null;
$(function () {
grid = $("#maingrid4").ligerGrid({
columns: [
{ display: '所屬機構', name: 'unit', align: 'left', width: 280 }, //注意這里的name的屬性值要對應JSON相關字段名稱
{ display: '姓名', name: 'realname', width: 220 },
{ display: '用戶名', name: 'username', width: 200,align:'left' },
{ display: '義工證號', name: 'certificatesno', width: 270,align:'left' },
{ display: '性別', name: 'sex', width: 200,align:'left' }
],
url: 'ygMember!findyg.action',
pageSize:20, //分頁大小
isScroll: true,
where : f_getWhere(),
isScroll: false,
hideLoadButton: false, //分頁的刷新按鈕
checkbox: true, //是否使用復選框
width: '100%',
height:'100%'
});
$("#pageloading").hide();
});
function f_search()
{
grid.options.data = $.extend(true, {}, TestData);
grid.loadData(f_getWhere());
}
function f_getWhere()
{
if (!grid) return null;
var clause = function (rowdata, rowindex)
{
var key = $("#txtKey").val();
return rowdata.deptid.indexOf(key) > -1;
};
return clause;
}
function search(){
grid.set({
dataAction:'server',
pageSize:'20', //分頁大小
// pageSizeOptions:[1,15,30,50],
usePager:true, //是否使用分頁
url:'ygMember!findyg.action',
parms:[ ///往后台傳送的查詢條件
{name:"deptname", value:$("#deptname").val()},
{name:"realname", value:$("#realname").val()},
{name:"username", value:$("#username").val()},
{name:"certificatesno", value:$("#certificatesno").val()},
{name:"sex", value:$("#sex").val()}
]
});
}
</script>
<style type="text/css">
.bb{
width: 50px;
height: 28px;
margin-left: 15px;
}
</style>
<body style="padding:6px; ">
<div id="searchbar" style="margin-bottom: 5px;">
所屬機構：<input id="deptname" name="deptname" type="text" />
姓名：<input id="realname" type="text" size="15px"/>
用戶名：<input id="username" type="text" size="15px" />
義工證號：<input id="certificatesno" type="text" />
性別：<select id="sex"><option value="">請選擇</option><option value="1">男</option><option value="2">女</option></select>
<input id="btnOK" type="button" value="搜索" style="width: 46px;" onclick="search()" />
</div>
<div id="maingrid4" style="margin:0; padding:0"></div>
<div style="display:none;">
</div>
</body>
具體導入的文件可上官網自行下載：http://www.ligerui.com/
API文檔查看鏈接：http://api.ligerui.com/