jqGrid中文API：https://blog.mn886.net/jqGrid/

 

源码：https://github.com/xiaostudy/web_sample

这里没有请求后台，是直接读取本地.json文件

就两个文件，一个html、一个json文件，jquery是jqgrid在线引用的

目录结构

 

效果

代码

test2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <!--jqueryui-->
 6     <link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css" rel="stylesheet">
 7     <!--jqgrid的css-->
 8     <link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">
 9 
10 
11     <!--jquery-->
12     <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
13     <!--locale-->
14     <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
15     <!--jqgrid的js-->
16     <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
17     <!--<script src="../js/layer/layer.js"></script>-->
18 
19     <meta charset="utf-8" />
20     <title>jqGrid Loading Data</title>
21 
22 </head>
23 <body>
24 <table id="jqGrid"></table>
25 <div id="jqGridPager"></div>
26 <script language="JavaScript">
27     $(function(){
28         $("#jqGrid").jqGrid({
29             url: "../json/test2.json",
30             datatype:'json',
31             colModel:[
32                 {label: "ID", name:"id",index:"id", width: 20},
33                 {label: "名称", name:"name",index:"name", width: 40},
34                 {label: "年龄", name:"age",index:"age", width: 40}
35             ],
36             viewrecords:true,//是否显示所有记录的总数
37             height: $(window).height() - 240,//定高度
38             // height: "auto",//自动高度，随行数变
39             rowNum:50,//当前显示行数
40             rowList:[2,4,5,6,8,10,12,15,25,30],//可选的行数
41             rownumbers: true,//显示行序列
42             rownumWidth: 25,//如果rownumbers为true，则可以设置column的宽度
43             // width: 500,//定宽度
44             autowidth: true,//自动宽度
45             pager:"#jqGridPager",//定义翻页用的导航栏，必须是有效的html元素，例如id为jqGridPager
46             jsonReader: {//来跟服务器端返回的数据做对应
47                 root: "records",//包含实际数据的数组
48                 page: "current",//当前页
49                 total: "pages",//总页数
50                 records: "total"//查询出的记录数
51             },
52             prmNames: {//发送数据到服务器，当参数为null时不会被发到服务器端
53                 page: "page",
54                 rows: "rows",
55                 order: "order"
56             },
57             beforeRequest: function() {//请求前触发的事件
58                 // layer.msg("beforeRequest");
59                 console.log("1——beforeRequest");
60             },
61             onPaging: function(pgButton) {//点击翻页按钮或点击换行数时触发此事件，也就是重新请求，参数pgButton为翻页，长度为总页数。初次加载时不执行，事件最后执行
62                 console.log("onPaging");
63             },
64             gridComplete: function () {//跟onPaging的事件一样，只是这个触发时最后执行。初次加载时也执行，两者事件不冲突
65                 console.log("2——gridComplete");
66             },
67             loadComplete: function (xhr) {//当从服务器返回响应时执行，xhr：XMLHttpRequest 对象
68                 console.log("3——loadComplete");
69             },
70             onCellSelect: function (rowid,iCol,cellcontent,e) {//当点击单元格时触发。rowid：当前行id；iCol：当前单元格索引；cellContent：当前单元格内容；e：event对象
71                 console.log("onCellSelect——rowid:" + rowid);
72                 console.log("onCellSelect——iCol:" + iCol);
73                 console.log("onCellSelect——cellcontent:" + cellcontent);
74                 console.log("onCellSelect——e:" + e);
75             },
76             ondblClickRow: function (rowid,iRow,iCol,e) {//双击行时触发。rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象
77                 console.log("ondblClickRow——rowid:" + rowid);
78                 console.log("ondblClickRow——iRow:" + iRow);
79                 console.log("ondblClickRow——iCol:" + iCol);
80                 console.log("ondblClickRow——e:" + e);
81             }//和鼠标右键事件onRightClickRow一样参数
82         });
83     });
84 </script>
85 
86 </body>
87 </html>

 

json文件test2.json

  1 {
  2   "current": 1,
  3   "total": 31,
  4   "pages": 4,
  5   "records": [
  6     {
  7       "id": 1,
  8       "name": "test1",
  9       "age": 21
 10     },
 11     {
 12       "id": 2,
 13       "name": "test2",
 14       "age": 22
 15     },
 16     {
 17       "id": 3,
 18       "name": "test3",
 19       "age": 23
 20     },
 21     {
 22       "id": 4,
 23       "name": "test4",
 24       "age": 24
 25     },
 26     {
 27       "id": 5,
 28       "name": "test5",
 29       "age": 25
 30     },
 31     {
 32       "id": 6,
 33       "name": "test6",
 34       "age": 26
 35     },
 36     {
 37       "id": 7,
 38       "name": "test7",
 39       "age": 27
 40     },
 41     {
 42       "id": 8,
 43       "name": "test8",
 44       "age": 28
 45     },
 46     {
 47       "id": 9,
 48       "name": "test9",
 49       "age": 29
 50     },
 51     {
 52       "id": 10,
 53       "name": "test10",
 54       "age": 30
 55     },
 56     {
 57       "id": 11,
 58       "name": "test11",
 59       "age": 31
 60     },
 61     {
 62       "id": 12,
 63       "name": "test12",
 64       "age": 32
 65     },
 66     {
 67       "id": 13,
 68       "name": "test13",
 69       "age": 33
 70     },
 71     {
 72       "id": 14,
 73       "name": "test14",
 74       "age": 34
 75     },
 76     {
 77       "id": 15,
 78       "name": "test15",
 79       "age": 35
 80     },
 81     {
 82       "id": 16,
 83       "name": "test16",
 84       "age": 36
 85     },
 86     {
 87       "id": 17,
 88       "name": "test17",
 89       "age": 37
 90     },
 91     {
 92       "id": 18,
 93       "name": "test18",
 94       "age": 38
 95     },
 96     {
 97       "id": 19,
 98       "name": "test19",
 99       "age": 39
100     },
101     {
102       "id": 20,
103       "name": "test20",
104       "age": 40
105     },
106     {
107       "id": 21,
108       "name": "test21",
109       "age": 41
110     },
111     {
112       "id": 22,
113       "name": "test22",
114       "age": 42
115     },
116     {
117       "id": 23,
118       "name": "test23",
119       "age": 43
120     },
121     {
122       "id": 24,
123       "name": "test24",
124       "age": 44
125     },
126     {
127       "id": 25,
128       "name": "test25",
129       "age": 45
130     },
131     {
132       "id": 26,
133       "name": "test26",
134       "age": 46
135     },
136     {
137       "id": 27,
138       "name": "test27",
139       "age": 47
140     },
141     {
142       "id": 28,
143       "name": "test28",
144       "age": 48
145     },
146     {
147       "id": 29,
148       "name": "test29",
149       "age": 49
150     },
151     {
152       "id": 30,
153       "name": "test30",
154       "age": 50
155     },
156     {
157       "id": 31,
158       "name": "test31",
159       "age": 51
160     }
161   ]
162 }