Jqgrid教程（简单上⼿）这⾥不⽤我多说Jqgrid怎么好，通过下图给⼤家演⽰⼀下：
下⾯说⼀说如何轻松使⽤它：
3.在页⾯中引⼊相关⽂件，⼀般css两个分别是：
ui.jqgrid.css
jquery-ui.css
，js四个：
jquery-1.7.2.min.js
jquery.jqGrid.min.js
jquery-ui.js
grid.locale-cn.js
如果觉得jquery-ui 的主题都不适合你，可以下别的主题也⾏，只是替换两个⽂件
jquery-ui.css
jquery-ui.js
⽐如这⾥可以应⽤bootstrap的主题：
ui.jqgrid-bootstrap.css
bootstrap.min.js
所以的准备⼯作做好以后就可以进⾏编写我们的jqgrid了：
下⾯是我的⼀个demo案例：
3. <head>
4. <meta charset="UTF-8">
5. <title>JCompare</title>
6. <link rel="stylesheet"type="text/css"href="jqgrid/css/ui.jqgrid.css">
7. <link rel="stylesheet"type="text/css"href="jqgrid/jquery.ui/jquery-ui.css">
8. <script type="text/javascript"src="jqgrid/js/jquery-1.7.2.min.js"></script>
9. <script type="text/javascript"src="jqgrid/js/i18n/grid.locale-cn.js"></script>
10. <script type="text/javascript"src="jqgrid/js/jquery.jqGrid.min.js"></script>
11. <script type="text/javascript"src="jqgrid/jquery.ui/jquery-ui.js"></script>
12. </head>
13. <body>
14. <table id="list"></table>
15. </body>
16. </html>
17.
18. <script type="text/javascript">
19. $("#list").jqGrid({
20.    url:'server.php?q=2',//请求数据的地址
21.    datatype: "json",
22.    colNames:['Id','姓名', '年龄'],
23.    //jqgrid主要通过下⾯的索引信息与后台传过来的值对应
24.    colModel:[
25.        {name:'id',index:'id', width:55},
26.        {name:'name',index:'invdate', width:90},
27.        {name:'age',index:'name', width:100}
28.        ],
29.    caption:"我是jqgrid的标题",
30. });
31. </script>
上⾯是⼀个最基本的jqgrid数据显⽰，接下来是在这个基础上增加⼀些附加功能：1.分页功能信息显⽰：
3. <head>
jquery学习在线教程
4. <meta charset="UTF-8">
5. <title>JCompare</title>
6. <link rel="stylesheet"type="text/css"href="jqgrid/css/ui.jqgrid.css">
7. <link rel="stylesheet"type="text/css"href="jqgrid/jquery.ui/jquery-ui.css">
8. <script type="text/javascript"src="jqgrid/js/jquery-1.7.2.min.js"></script>
9. <script type="text/javascript"src="jqgrid/js/i18n/grid.locale-cn.js"></script>
10. <script type="text/javascript"src="jqgrid/js/jquery.jqGrid.min.js"></script>
11. <script type="text/javascript"src="jqgrid/jquery.ui/jquery-ui.js"></script>
12. </head>
13. <body>
14. <table id="list"></table>
15. <span ><div id="pager"></div></span>
16. </body>
17. </html>
18.
19. <script type="text/javascript">
20. $("#list").jqGrid({
21.    url:'server.php?q=2',//请求数据的地址
22.    datatype: "json",
23.    colNames:['Id','姓名', '年龄'],
24.    //jqgrid主要通过下⾯的索引信息与后台传过来的值对应
25.    colModel:[
26.        {name:'id',index:'id', width:55},
27.        {name:'name',index:'invdate', width:90},
28.        {name:'age',index:'name', width:100}
29.        ],
30.    caption:"我是jqgrid的标题",
31. <span >    rowNum : 10,
32.    rowList : [ 10, 20, 30 ],
33.    pager : '#pager',
34.    sortname : 'id',
35.    recordpos : 'right',
36.    height:300,
37.    viewrecords : true</span>
38. });
39.
40. </script>
2.显⽰系统默认的添加，修改，删除，查询，更新按钮。
[javascript]
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JCompare</title>
6. <link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
7. <link rel="stylesheet" type="text/css"<span >  </span>href="jqgrid/jquery.ui/jquery-ui.css">
8. <script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
9. <script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
10. <script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
11. <script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
12. </head>
13. <body>
14. <span >    </span><table id="list"></table>
15. <span >    </span><div id="pager"></div>
16. </body>
17.
18.
19. <script type="text/javascript">
20. $("#list").jqGrid({
21.    <span >  </span>url:'server.php?q=2',//请求数据的地址
22. <span >    </span>datatype: "json",
23.    <span >  </span>colNames:['Id','姓名', '年龄'],
24. <span >    </span>//jqgrid主要通过下⾯的索引信息与后台传过来的值对应
25.    <span >  </span>colModel:[
26.    <span >      </span>{name:'id',index:'id', width:200},
27.    <span >      </span>{name:'name',index:'invdate', width:200},
28.    <span >      </span>{name:'age',index:'name', width:300}
29.      <span >  </span>],
30.    <span >  </span>caption:"我是jqgrid的标题",
31.    rowNum : 10,
32.    rowList : [ 10, 20, 30 ],
33.    pager : '#pager',
34.    sortname : 'id',
35.    recordpos : 'right',
36.    height:300,
37.    viewrecords : true
38. });
39. $("#list").jqGrid('navGrid', '#pager', {
40.    add : true,
41.    del : true,
42.    edit : true,
43.    position : 'left',
44.    });
45. </script>
46. </html>
3.可以为添加修改删除指定我们⾃定义的事件：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。