jqGrid组件
jsp
<html>
<link type="text/css" rel="stylesheet"
href="/7e/css/template/default/style.css">
<link type="text/css" rel="stylesheet"
href="/7e/css/template/default/network.css">
<link type="text/css" rel="stylesheet"
href="/7e/css/template/default/space.css">
<link type="text/css" rel="stylesheet"
href="/7e/css/datepick/humanity.datepick.css">
<script type="text/javascript" src="/7e/js/datepick/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/7e/js/datepick/jquery.datepick.js"></script>
<script type="text/javascript"
src="/7e/js/datepick/jquery.datepick.lang.js"></script>
<head>
<base href=<%=basePath%>>
<script language="javascript" type="text/javascript"
src="/7e/js/util/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen"
href="/7e/css/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="/7e/css/themes/ui.jqgrid.css" />
<script type="text/javascript" src="/7e/js/admincp/jquery.min.js"></script>
<script type="text/javascript"
src="/7e/js/admincp/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript"
src="/7e/js/admincp/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="/7e/js/admincp/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
// 配置jqGrid组件
$("#feedlesson").jqGrid({
url : "/7e/s/jqGridCourse.action",
datatype : "json",
data:"uid=1",
mtype : "post",
height : 180,
autowidth : true,
colModel : [ {
name : "cname",
index : "cname",
label : "课程名",
width : 180
},],
viewrecords : true,
rowNum : 8,
rowList : [ 5, 8 ],
prmNames : {
search : "search"
}, //(1)
jsonReader : {
root : "frontcoursebuy", // (2)
records : "record", // (3)
repeatitems : false
// (4)
},
pager : "#gridPager2",
hidegrid : false
});
});
</script>
<script type="text/javascript">
function changeBody(index) {
switch (index) {
case 1: {
document.getElementById('bull').style.display = "";
document.getElementById('cont').style.display = "none";
document.getElementById('gridPager').style.display = "none";
document.getElementById('dis').style.display = "none";
break;
}
case 2: {
document.getElementById('bull').style.display = "none";
document.getElementById('cont').style.display = "";
document.getElementById('gridPager').style.display = "";
document.getElementById('dis').style.display = "";
break;
}
}
}
</script>
</head>
<body>
<div id="warp">
<div id="mainarea">
<div id="content">
<br />
<div class="feed">
<div id="feedlessondiv">
<table id="feedlesson" >
</table>
<div id="gridPager2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
struts
<action name="jqGridCourse" class="studentAction" method="findCourseBuyByUid"> <result type="json"> <param name="includeProperties"> ^frontcoursebuy\[\d+\]\.\w+, rows, page, total, record , </param> <param name="excludeProperties">stdCourseService,studentService,courseservice </param> </result> </action>
action
private int rows;
private int page;
private String sidx;
private String sord;
private Integer total;
private Integer record;
/**
* @param int uid
* @return List<Map>
*/
//rows page sidx sord=asc
public String findCourseBuyByUid() {
int pages =rows*(page-1);
System.out.println("uid: "+uid+" rows: "+rows+" pages: "+pages+" sidx: "+sidx+" sord: "+sord);
frontcoursebuy = stdCourseService.findCourseBuyByUid(uid,rows,pages,sidx,sord);
List<Map> list = stdCourseService.findCourseBuyByUid(uid,10000000,0,sidx,sord);
record = list.size(); //总记录数
System.out.println("record "+record);
total = (int) Math.ceil((double) record / (double) rows);//总页数
return SUCCESS;
}
成员变量 对应 prmNames 对应 jsonReader 注释
rows rows - 每页中现实的记录行数
search search - 是否是用于查询的请求
sidx sort - 用于排序的列名
sord order - 排序的方式
page page page 当前页码
gridModel - root 用于得到实际数据的数组名称
total - total 总页数
record - records 总记录数