前端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', 280 }, //注意这里的name的属性值要对应JSON相关字段名称
{ display: '姓名', name: 'realname', 220 },
{ display: '用户名', name: 'username', 200,align:'left' },
{ display: '义工证号', name: 'certificatesno', 270,align:'left' },
{ display: '性别', name: 'sex', 200,align:'left' }
],
url: 'ygMember!findyg.action',
pageSize:20, //分页大小
isScroll: true,
where : f_getWhere(),
isScroll: false,
hideLoadButton: false, //分页的刷新按钮
checkbox: true, //是否使用复选框
'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{
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=" 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/