直接上代码： javascript
index.html css
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<link rel="stylesheet" type="text/css" media="screen" href="css/jqGrid/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jqGrid/ui.jqgrid.css" />
<script src="js/jqGrid/js/json2.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/jqGrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
<table id="supervise" cellpadding="0" cellspacing="0"></table>
<div id="pjmap"></div>
<script>
$(document).ready(function(){
$("#supervise").getSupervise();
})
</script>
</body>
</html> html
test.js java
jQuery.fn.getSupervise=function(){
jQuery("#supervise").jqGrid({
url: "test/list",
datatype: 'json',
mtype: 'POST',
colNames:['id','name'],
colModel :[
{name:'id',label:'id',width:20},
{name:'name', label:'name', width:60},
],
jsonReader: {
repeatitems: false,
},
rowNum:10,
rowList:[10,20,30],
pager: '#pjmap',
height:'300',
width:'760',
loadtext: '正在加载数据...',
loadui : 'block',
viewrecords: true,
imgpath: '/front_res/css/jqGrid/images',
caption: '舆情数据'
}
);
jQuery("#supervise").jqGrid('supervise','#pjmap',{edit:false,add:false,del:false});
}
TestController.java jquery
public class TestController extends Controller {
public void list() {
Page<Test> rows = Test.dao.paginate(getParaToInt("page", 1), 10, "select *", "from test");
Map root = new HashMap();
root.put("total", rows.getTotalPage());
root.put("page", rows.getPageNumber());
root.put("records", rows.getTotalRow());
root.put("rows", rows.getList());
renderJson(JsonKit.toJson(root));
}
} json
使用jfinal结合jqgrid就是这么简单。 ui