直接上代码：
index.html
<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>test.js
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.javapublic 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)); } }使用jfinal结合jqgrid就是这么简单。