jfinal与jqgrid结合实例。

直接上代码:

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.java

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));
    }
}

使用jfinal结合jqgrid就是这么简单。

你可能感兴趣的:(jqGrid,jFinal)