本人目前还是实习生,领导布置了一个考核任务,其中就使用到了这个ligerui的表格框架。ligerui的功能还是很强大的,东西很全。大家有需要的可以先去JQuery LigerUi这里看看,里面很全,各种案例和API。
接下来就是讲一下我的第一个小demo,尽量详细,让和我一样的小菜鸟们能尽快上手。
首先第一步, 先去JQuery LigerUi 把我们需要的包下载下来,里面有两个文件夹
其中Document里面是ligerui的api,很详细,遇到问题可以先来这里看看。
Source里面就是我们需要的各种css和js文件,把lib包直接拷贝到你的项目中就可以了。
第二步,新建一个jsp,把你需要的js和css文件都加入到jsp中
<link href="${pageContext.request.contextPath}/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/cs">
<script
type="text/javascript"src="${pageContext.request.contextPath}/lib/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/lib/ligerUI/js/ligerui.min.js"></script>
<div style="width: 760px">
<div id="maingrid"></div>
</div>
接下来就是关键的东西了
var XB = {
"1" : "男",
"2" : "女"
};
//表头
var dataCloum = [ {
display : '机构名称',
width : 190,
name : 'DEPTNAME'
}, {
display : '姓名',
width : 70,
name : 'REALNAME'
}, {
display : '用户名',
width : 100,
name : 'USERNAME'
}, {
display : '性别',
name : 'SEX',
width : 50,
render : function(row) {//单元格渲染器,其实就是单元格格式化,使用自定义方法
return XB[row.SEX];
}
}, {
display : '义工证号',
width : 140,
align : 'left',
name : 'YGCARDNO'
}, {
display : '活动时长',
align : 'left',
width : 60,
name : 'SERVICETIME',
render : function(row) {
return row.SERVICETIME + "小时";
}
}, {
display : '培训时长',
align : 'left',
width : 60,
name : 'TRAINTIME',
render : function(row) {
return row.TRAINTIME + "小时";
}
}, {
display : '状态',
align : 'left',
width : 65,
name : 'STATE',
render : function(row) {
return ZT[row.STATE];
}
}, ];
$("#maingrid").ligerGrid({
checkbox : true,//开启复选框
columns : dataCloum,
url : 'yg.do',
pageSize : 30,//每页默认的结果数
parms:[{name:"status",value:1},{name:"deptId",value:1}],
//想服务器提交的参数,name是参数名,value是参数值,可以放很多个
pagesizeParmName : 'pageSize',//提交给服务器的
userPager : true,//开启分页
dataAction : 'server',//服务器分页
selectRowButtonOnly : true,//必须点击选择框时才选中行
height : '80%',
frozenCheckbox : false// 复选框按钮是否在固定列中
});
然后就是拿数据了,记住,我们最后需要的是json格式的数据,里面的格式是
Rows:是我们需要分页的数据
Pages:是总页数
Total:是一共有多少条数据
@RequestMapping("yg.do")
@ResponseBody
public void getAll(
@RequestParam(value = "pageSize", required = true) int pageSize,
@RequestParam(value = "page", required = true) int page,
@RequestParam(value = "parms", required = false) String parms,
@RequestParam(value = "deptId", required = false) Integer deptId,
@RequestParam(value = "status", defaultValue = "1") Integer status,
HttpServletResponse response) {
PrintWriter out = null;
try {
response.setContentType("text/json");
response.setCharacterEncoding("UTF-8");
out = response.getWriter();
// 在使用response.getWriter()时,方法应无返回值
// 既手动调用PrintWriter向客户端输出内容,又设置了方法返回值,因此会报错
Map<String, Object> map = ygService.getAllUser(page, pageSize,
parms, deptId, status);
String jsonObj = JSONUtil.toJSON(map);
out.print(jsonObj);
out.flush();
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
@RequestParam(value = “deptId”, required = false)
required=false时,就是在你提交参数的时候,这个参数可以为空,但是必须提交参数。
其中,Pages和Total的值我是在service层放进去的,你们可以用一个Map
if (count % pagesize != 0) {
pages = count / pagesize + 1;
} else {
pages = count / pagesize;
}
all.put("Total", count);
all.put("Pages", pages);
all.put("Rows", mapList);
接下来运行就能看到我们的表格啦
[1]转载请说明地址,谢谢~