jqGrid的分页

jqGrid的分页

原创  2015年12月17日 14:37:44

• 标签：
• JAVA /
• jqgrid /
• 分页 /
• jar /
• javascript

• 5263

1、先导入三个jar包

2、再导入两个css文件

3、最后导入三个js文件

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

[html]  view plain  copy

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 plain  copy

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 plain  copy

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 plain  copy

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 plain  copy

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 plain  copy

1. /** 
2.      * 降水 查询图 日查询 所有站点 
3.      * @param map 
4.      * @return list 
5.      */  
6.     public PageInfo dayAllQuery(Map map);  

实现类daoImpl里代码

[java]  view plain  copy

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 plain  copy

1. /** 
2.      * 降水 查询图 日查询 所有站点 
3.      * @param map 
4.      * @return list 
5.      */  
6.     PageInfo dayAllQuery(Map map);  

实现类serviceImpl里代码

[java]  view plain  copy

1. public PageInfo dayAllQuery(Map map) {  
2.         return hRainInfoDao.dayAllQuery(map);  
3.     }  

9、mapper.xml里代码

[html]  view plain  copy

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://download.csdn.net/detail/sinat_31998357/9364311下载。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_31998357/article/details/50341427