jqGrid的分页

标签：jqgrid   java   分页   

1、先导入三个jar包

2、再导入两个css文件

3、最后导入三个js文件

4、jsp里引入css和js文件，注意先后顺序

[html] view plaincopy

1. <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>  

2. <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" media="screen"/>  

3. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>  

4. <script type="text/javascript" src="js/grid.locale-cn.js"></script>  

5. <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>  

5、在jsp里写一个存放表格数据的table和div

[html] view plaincopy

1. <div id=‘tableDay‘  

2.                     style="float: left; width: 780px; margin: 0 15px 0 13px;">  

3.                     <table id="tableListDay" style="width: 780px;"></table>  

4.                     <div id="tablePagerDay" style="width: 780px;"></div>  

5.                 </div>  

6、在自己的js里封装好方法

[html] view plaincopy

1. function loadDayGrid(day_URL){  

2.       

3.     $(‘#tableDay‘).show();  

4.     $.jgrid.defaults.styleUI="Bootstrap";  

5.     $("#tableListDay").jqGrid({  

6.         url : day_URL,  

7.         datatype : "json",  

8.         jsonReader: {  

9.             root: "list",  

10.             //page: "currpage",  

11.             total: "pages"  

12.             //records: "totalrecords",  

13.             //cell: "invrow"  

14.             //id: config.dataIdKey  

15.      },  

16.         colNames : [ ‘站点‘, ‘年‘, ‘月‘, ‘日‘, ‘降水量‘ ],  

17.         colModel : [ {  

18.             name : ‘c_STATION_NAME‘,  

19.             index : ‘c_STATION_NAME‘,  

20.             align : "center",  

21.             width : 100  

22.         }, {  

23.             name : ‘YEAR‘,  

24.             index : ‘YEAR‘,  

25.             align : "center",  

26.             width : 100  

27.         }, {  

28.             name : ‘MONTH‘,  

29.             index : ‘MONTH‘,  

30.             width : 100,  

31.             align : "center"  

32.         }, {  

33.             name : ‘DAY‘,  

34.             index : ‘DAY‘,  

35.             width : 100,  

36.             align : "center"  

37.         }, {  

38.             name : ‘AVG‘,  

39.             index : ‘AVG‘,  

40.             width : 130,  

41.             align : "center"  

42.         } ],  

43.         viewrecords : true,  

44.         shrinkToFit : true,  

45.         rownumbers: true,  

46.         autowidth: true,  

47.         autoScroll: true,  

48.         multiselect: true,  

49.         rowList: [50, 100, 200, 400, 600],  

50.         hidegrid: false,  

51.         rowNum : 50,  

52.         pager : ‘#tablePagerDay‘,   

53.         width : 700,  

54.         height : 400,  

55.     });  

56. }  

调用此方法并重新加载jqGrid

[html] view plaincopy

1. var dayUrl = ‘dayAllTableRain.action?beginyear=‘ + beginyear  

2.                 + ‘&endyear=‘ + endyear + ‘&month=‘ + month  

3.                 + ‘&day=‘ + day;  

4.                 loadDayGrid(dayUrl);  

5.                 $("#tableListDay").jqGrid(‘setGridParam‘, {  

6.                     url : dayUrl,  

7.                     datatype : "json",  

8.                     mtype : "get",  

9.                 }).trigger("reloadGrid");  

7、在action里写好请求地址对应的方法

[java] view plaincopy

1. public String dayAllTableRain(){  

2.         try {  

3.             HttpServletRequest req = ServletActionContext.getRequest();  

4.             HttpServletResponse response = ServletActionContext.getResponse();  

5.             response.setCharacterEncoding("UTF-8");  

6.             req.setCharacterEncoding("UTF-8");  

7.             int page=0;  

8.             int rows=0;  

9.             try{  

10.                  page=Integer.parseInt(req.getParameter("page"));  

11.                  rows=Integer.parseInt(req.getParameter("rows"));  

12.             }catch(Exception e){  

13.                 e.printStackTrace();  

14.             }  

15.             String beginyear = req.getParameter("beginyear");  

16.             String endyear = req.getParameter("endyear");  

17.             String month = req.getParameter("month");  

18.             String day = req.getParameter("day");  

19.             Map map = new HashMap();  

20.             map.put("beginyear", beginyear);  

21.             map.put("endyear", endyear);  

22.             map.put("month", month);  

23.             map.put("day", day);  

24.             map.put("rows", rows);  

25.             map.put("page", page);  

26.             PageInfo pageInfo = this.hRainService.dayAllQuery(map);  

27.             PrintWriter writer = response.getWriter();  

28.             JSONObject jsondata = JSONObject.fromObject(pageInfo);  

29.             writer.print(jsondata.toString());  

30.         } catch (Exception e) {  

31.             e.printStackTrace();  

32.         }  

33.         return null;  

34.     }  

8、接口dao里代码

[java] view plaincopy

1. /** 

2.      * 降水 查询图 日查询 所有站点 

3.      * @param map 

4.      * @return list 

5.      */  

6.     public PageInfo dayAllQuery(Map map);  

实现类daoImpl里代码

[java] view plaincopy

1. public PageInfo dayAllQuery(Map map) {  

2.         //获取第page页，rows条内容，默认查询总数count  

3.         int rows =Integer.parseInt(map.get("rows").toString());  

4.         int page =Integer.parseInt(map.get("page").toString());  

5.         SqlSession sqlSession=this.getSqlSession();  

6.         if(rows!=0&&page!=0){  

7.             PageHelper.startPage(page,rows);  

8.         }else{  

9.               

10.         }  

11.         List<HRainInfo> list=sqlSession.selectList("dayAllQuery",map);  

12.         PageInfo<HRainInfo> pageInfo = new PageInfo(list);  

13.         return pageInfo;  

14.     }  

接口serivce里代码

[java] view plaincopy

1. /** 

2.      * 降水 查询图 日查询 所有站点 

3.      * @param map 

4.      * @return list 

5.      */  

6.     PageInfo dayAllQuery(Map map);  

实现类serviceImpl里代码

[java] view plaincopy

1. public PageInfo dayAllQuery(Map map) {  

2.         return hRainInfoDao.dayAllQuery(map);  

3.     }  

9、mapper.xml里代码

[html] view plaincopy

1. <!-- 降水 查询图 日查询 所有站点 -->  

2.     <select id="dayAllQuery" parameterType="map" resultType="HRainInfo">  

3.     <![CDATA[ 

4.         select avg(r.hour24r) avg,r.year,r.month,r.day,s.c_station_name from 

5.          T_JS_OBT_HOUR_RAIN r,t_js_cd_station s ,nuist_cd_station_code n 

6.         where r.year between #{beginyear} and #{endyear} and r.month=#{month} and r.day=#{day} 

7.          and r.obtid=s.v01000 and s.c_county_code=n.c_county_code and n.c_county_code=320111 

8.          group by r.year,r.month,r.day,s.c_station_name 

9.          ]]>  

10.     </select>  

所需的导入jar包，css文件，js文件到http://down.51cto.com/data/2127956下载。

本文出自 “没有水勒鱼” 博客，请务必保留此出处http://javaqun.blog.51cto.com/10687700/1725663

jqGrid的分页

标签：jqgrid   java   分页   

原文地址：http://javaqun.blog.51cto.com/10687700/1725663