jfinal與jqgrid結合實例。

時間 2019-11-06

原文原文鏈接

直接上代碼： 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。