jqGrid的分页

「爱情、让人受尽委屈。」 2022-05-28 04:44 194阅读 0赞

# jqGrid的分页 #

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

*  标签：
 *  [JAVA][] /
 *  [jqgrid][] /
 *  [分页][Link 1] /
 *  [jar][] /
 *  [javascript][]

*  5263

1、先导入三个jar包

![20151217143749671][]

2、再导入两个css文件

![20151217143855277][]

3、最后导入三个js文件

![20151217143939016][]

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

**\[html\]**  [view plain][]  [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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里写好请求地址对应的方法