Jqgrid教程（简单上手）

其他 2018-06-21 10:23:26 阅读次数: 3
这里不用我多说Jqgrid怎么好，通过下图给大家演示一下：


下面说一说如何轻松使用它：

1.首先需要下载jqgrid的相关包：http://www.trirand.com/blog/?page_id=6（根据需要自行下载）

2.然后需要下载jqgrid皮肤文件：可以用jquery-ui，jqgrid本身支持jquery-ui，下载地址：http://jqueryui.com/themeroller/（选择一个喜欢的皮肤下载）。

3.在页面中引入相关文件，一般css两个分别是：

ui.jqgrid.css

jquery-ui.css

，js四个：

jquery-1.7.2.min.js 

jquery.jqGrid.min.js    

 jquery-ui.js    

扫描二维码关注公众号，回复： 1674770 查看本文章

 grid.locale-cn.js

如果觉得jquery-ui 的主题都不适合你，可以下别的主题也行，只是替换两个文件

jquery-ui.css  

jquery-ui.js   

比如这里可以应用bootstrap的主题：

 ui.jqgrid-bootstrap.css

bootstrap.min.js

所以的准备工作做好以后就可以进行编写我们的jqgrid了：

下面是我的一个demo案例：



[html]  view plain  copy
  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"   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.分页功能信息显示：

[html]  view plain  copy
  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"   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 style="background-color: rgb(204, 204, 204);">  <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 style="background-color: rgb(204, 204, 204);">    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]  view plain  copy
  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 style="white-space:pre">   </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 style="white-space:pre">    </span><table id="list"></table>  
  15. <span style="white-space:pre">    </span><div id="pager"></div>  
  16. </body>  
  17.   
  18.   
  19. <script type="text/javascript">  
  20. $("#list").jqGrid({          
  21.    <span style="white-space:pre">   </span>url:'server.php?q=2',//请求数据的地址  
  22. <span style="white-space:pre">    </span>datatype: "json",  
  23.    <span style="white-space:pre">   </span>colNames:['Id','姓名', '年龄'],  
  24. <span style="white-space:pre">    </span>//jqgrid主要通过下面的索引信息与后台传过来的值对应  
  25.    <span style="white-space:pre">   </span>colModel:[  
  26.    <span style="white-space:pre">       </span>{name:'id',index:'id', width:200},  
  27.    <span style="white-space:pre">       </span>{name:'name',index:'invdate', width:200},  
  28.    <span style="white-space:pre">       </span>{name:'age',index:'name', width:300}  
  29.       <span style="white-space:pre">   </span>],  
  30.    <span style="white-space:pre">   </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.可以为添加修改删除指定我们自定义的事件：

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3. var openDialog4Adding = function() {    
  4.     alert("add Demo");  
  5.       
  6. };    
  7. var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数    
  8.     alert("update Demo");  
  9. };    
  10. var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数    
  11.     alert("delete Demo");  
  12. };    
  13.   
  14.   
  15. $("#list").jqGrid({          
  16.     url:'server.php?q=2',//请求数据的地址  
  17.     datatype: "json",  
  18.     colNames:['Id','姓名', '年龄'],  
  19.     //jqgrid主要通过下面的索引信息与后台传过来的值对应  
  20.     colModel:[  
  21.         {name:'id',index:'id', width:200},  
  22.         {name:'name',index:'invdate', width:200},  
  23.         {name:'age',index:'name', width:300}  
  24.         ],  
  25.     caption:"我是jqgrid的标题",  
  26.     rowNum : 10,  
  27.     rowList : [ 10, 20, 30 ],  
  28.     pager : '#pager',  
  29.     sortname : 'id',  
  30.     recordpos : 'right',  
  31.     height:300,  
  32.     viewrecords : true  
  33. });  
  34. $("#list").jqGrid('navGrid', '#pager', {  
  35.     add : true,  
  36.     del : true,  
  37.     edit : true,  
  38.     position : 'left',  
  39.     addfunc : openDialog4Adding,    // (1) 点击添加按钮，则调用openDialog4Adding方法    
  40.     editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法    
  41.     delfunc : openDialog4Deleting,  // (3) 点击删除按钮，则调用openDialog4Deleting方法    
  42.     alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息    
  43.   });  
  44.     
  45. </script>  

4.自定义按钮+点击弹出框

需要在html中加入下面代码：

[html]  view plain  copy
  1.    <div>  
  2.       <button class="right-button02" onclick="openDialog4Adding()">添加</button>   
  3. <button class="right-button02" onclick="openDialog4Updating()">修改</button>   
  4.     <button class="right-button02" onclick="openDialog4Deleting()">删除</button>  
  5.      
  6.    </div>  
  7.    <div id="consoleDlg">  
  8.     <div id="formContainer">  
  9.         <form id="consoleForm">  
  10.             <input type="hidden" id="selectId" />  
  11.             <table class="formTable">  
  12.                 <tr>  
  13.                     <th>  
  14.                         姓名：  
  15.                     </th>  
  16.                     <td>  
  17.                         <input type="text" class="textField" id="ename"  
  18.                             name="ename" />  
  19.                     </td>  
  20.                 </tr>  
  21.                 <tr>  
  22.                     <th id="thusergender">  
  23.                         性  别：  
  24.                     </th>  
  25.                     <td>  
  26.                         <input type="text" class="textField" id="esex"  
  27.                             name="esex" />  
  28.                     </td>  
  29.                 </tr>  
  30.                 <tr>  
  31.                     <th>  
  32.                         出生日期：  
  33.                     </th>  
  34.                     <td>  
  35.                         <input type="text" class="textField" id="birthday"  
  36.                             name="birthday" />  
  37.                     </td>  
  38.                 </tr>  
  39.                 <tr>  
  40.                     <th>  
  41.                         部门：  
  42.                     </th>  
  43.                     <td>  
  44.                         <input type="text" class="textField" id="department"  
  45.                             name="department" />  
  46.                     </td>  
  47.                 </tr>  
  48.                 <tr>  
  49.                     <th>  
  50.                         备注：  
  51.                     </th>  
  52.                     <td>  
  53.                         <input type="text" class="textField" id="eremark"  
  54.                             name="eremark" />  
  55.                     </td>  
  56.                 </tr>  
  57.             </table>  
  58.         </form>  
  59.     </div>  
  60. </div>                      
然后再写js代码：

[javascript]  view plain  copy
  1. // 配置对话框    
  2.     $("#consoleDlg").dialog({    
  3.         autoOpen: false,        
  4.         modal: true,    // 设置对话框为模态（modal）对话框    
  5.         resizable: true,        
  6.         width: 480,    
  7.         buttons: {  // 为对话框添加按钮    
  8.             "取消": function() {$("#consoleDlg").dialog("close")},    
  9.             "添加": addEmployee,    
  10.             "保存": updateEmployee,    
  11.             "删除": deleteEmployee    
  12.         }    
  13.     });    
  14.   
  15. var openDialog4Adding = function() {    
  16.         var consoleDlg = $("#consoleDlg");    
  17.         var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");    
  18.         consoleDlg.find("input").removeAttr("disabled").val("");    
  19.         dialogButtonPanel.find("button:not(:contains('取消'))").hide();    
  20.         dialogButtonPanel.find("button:contains('添加')").show();    
  21.         consoleDlg.dialog("option", "title", "添加员工信息 ").dialog("open");    
  22.     };    
  23.     var openDialog4Updating = function() {    
  24.         var consoleDlg = $("#consoleDlg");    
  25.         var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");    
  26.             
  27.         consoleDlg.find("input").removeAttr("disabled");    
  28.         dialogButtonPanel.find("button:not(:contains('取消'))").hide();    
  29.         dialogButtonPanel.find("button:contains('保存')").show();    
  30.         consoleDlg.dialog("option", "title", "修改员工信息");    
  31.             
  32.         loadSelectedRowData();    
  33.     }    
  34.     var openDialog4Deleting = function() {    
  35.         var consoleDlg = $("#consoleDlg");    
  36.         var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");    
  37.             
  38.         consoleDlg.find("input").attr("disabled", true);    
  39.         dialogButtonPanel.find("button:not(:contains('取消'))").hide();    
  40.         dialogButtonPanel.find("button:contains('删除')").show();    
  41.         consoleDlg.dialog("option", "title", "删除员工");    
  42.             
  43.         loadSelectedRowData();    
  44.     }    
  45.                     
  46.      var loadSelectedRowData = function() {  
  47.             var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  48.             if (!selectedRowId) {  
  49.                 hiAlert("请先选择需要编辑的行!");  
  50.                 return false;  
  51.             } else {  
  52.                 var params = {  
  53.                     "employee.eid" : selectedRowId  
  54.                 };  
  55.                 // 从Server读取对应ID的JSON数据  
  56.                 $.ajax( {  
  57.                     url : "employee_find.action",  
  58.                     data : params,  
  59.                     dataType : "json",  
  60.                     cache : false,  
  61.                     error : function(textStatus, errorThrown) {  
  62.                         hiAlert("系统ajax交互错误: " + textStatus);  
  63.                     },  
  64.                     success : function(data, textStatus) {  
  65.                         // 如果读取结果成功，则将信息载入到对话框中                   
  66.                       var rowData = data.person;    
  67.                       var consoleDlg = $("#consoleDlg");    
  68.                         
  69.                       consoleDlg.find("#selectId").val(rowData.id);    
  70.                       consoleDlg.find("#ename").val(rowData.ename);    
  71.                       consoleDlg.find("#esex").val(rowData.esex);    
  72.                       consoleDlg.find("#birthday").val(rowData.birthday);    
  73.                       consoleDlg.find("#department").val(rowData.department);    
  74.                       consoleDlg.find("#eremark").val(rowData.eremark);    
  75.                     // 根据新载入的数据将表格中的对应数据行一并更新一下  
  76.                      var  dataRow = {    
  77.                                  id : data.employee.eid,   // 从Server端得到系统分配的id    
  78.                                  ename :ename,    
  79.                                  esex : esex,  
  80.                                  birthday: birthday,  
  81.                                  department: department,  
  82.                                  eremark:eremark   
  83.                              };  
  84.           
  85.                     $("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);  
  86.           
  87.                     // 打开对话框  
  88.                     consoleDlg.dialog("open");  
  89.                 }  
  90.                 });  
  91.           
  92.             }  
  93.         };              
  94.   //数据更新   
  95.    function updateEmployee() {   
  96.                  var consoleDlg = $("#consoleDlg");        
  97.                      
  98.                  var eid = $.trim(consoleDlg.find("#selectId").val());    
  99.                  var eanme = $.trim(consoleDlg.find("#eanme").val());    
  100.                  var esex = $.trim(consoleDlg.find("#esex").val());    
  101.                  var birthday = $.trim(consoleDlg.find("#birthday").val());   
  102.                  var department = $.trim(consoleDlg.find("#department").val());   
  103.                  var eremark = $.trim(consoleDlg.find("#eremark").val());      
  104.                  var params = {    
  105.                          "employee.eid" : eid,  
  106.                          "employee.ename" : ename,    
  107.                          "employee.esex" : esex,  
  108.                          "employee.birthday" : birthday,    
  109.                          "employee.department" : department,  
  110.                          "employee.eremark" : eremark     
  111.                  };    
  112.                  var actionUrl = "employee_update.action";    
  113.                  $.ajax( {    
  114.                      url : actionUrl,    
  115.                      data : params,    
  116.                      dataType : "json",    
  117.                      cache : false,    
  118.                      error : function(textStatus, errorThrown) {    
  119.                          alert("系统ajax交互错误: " + textStatus);    
  120.                      },    
  121.                      success : function(data, textStatus) {    
  122.                          if (data.ajaxResult == "success") {    
  123.                              var dataRow = {    
  124.                                  id : data.employee.eid,   // 从Server端得到系统分配的id    
  125.                                  ename :ename,    
  126.                                  esex : esex,  
  127.                                  birthday: birthday,  
  128.                                  department: department,  
  129.                                  eremark:eremark   
  130.                              };    
  131.                              alert("联系人信息更新成功!");    
  132.                              consoleDlg.dialog("close");    
  133.                              $("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);    
  134.                          } else {    
  135.                              alert("修改操作失败!");    
  136.                          }    
  137.                      }    
  138.                  });    
  139.             };  
  140.           
  141. var addEmployee = function() {    
  142.     var consoleDlg = $("#consoleDlg");    
  143.             
  144.     var eanme = $.trim(consoleDlg.find("#eanme").val());    
  145.     var esex = $.trim(consoleDlg.find("#esex").val());    
  146.     var birthday = $.trim(consoleDlg.find("#birthday").val());   
  147.     var department = $.trim(consoleDlg.find("#department").val());   
  148.     var eremark = $.trim(consoleDlg.find("#eremark").val());    
  149.         
  150.     var params = {    
  151.         "employee.ename" : ename,    
  152.         "employee.esex" : esex,  
  153.         "employee.birthday" : birthday,    
  154.         "employee.department" : department,  
  155.         "employee.eremark" : eremark     
  156.     };    
  157.         
  158.      var actionUrl = "employee_add.action";  
  159.         
  160.     $.ajax( {    
  161.         url : actionUrl,    
  162.         data : params,    
  163.         dataType : "json",    
  164.         cache : false,    
  165.         error : function(textStatus, errorThrown) {    
  166.             alert("系统ajax交互错误: " + textStatus);    
  167.         },    
  168.         success : function(data, textStatus) {    
  169.             if(data.ajaxResult == "success") {    
  170.                 var dataRow = {    
  171.                    id : data.employee.eid,   // 从Server端得到系统分配的id    
  172.                                  ename :ename,    
  173.                                  esex : esex,  
  174.                                  birthday: birthday,  
  175.                                  department: department,  
  176.                                  eremark:eremark   
  177.                 };    
  178.                     
  179.                 var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");    
  180.                     
  181.                 if(srcrowid) {    
  182.                     $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "before", srcrowid);  
  183.                         
  184.                 } else {    
  185.                     $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "first");    
  186.                 }    
  187.                 consoleDlg.dialog("close");    
  188.                     
  189.                 alert("联系人添加操作成功!");    
  190.                     
  191.             } else {    
  192.                 alert("添加操作失败!");    
  193.             }    
  194.         }    
  195.     });    
  196. };    
  197.   
  198. //数据删除  
  199.       var deleteEmployee = function() {    
  200.             var consoleDlg = $("#consoleDlg");    
  201.                 
  202.             var pId = $.trim(consoleDlg.find("#selectId").val());    
  203.             var params = {    
  204.                 "employee.eid" : pId    
  205.             };    
  206.             var actionUrl = "employee_delete.action";    
  207.             $.ajax({    
  208.                 url : actionUrl,    
  209.                 data : params,    
  210.                 dataType : "json",    
  211.                 cache : false,    
  212.                 error : function(textStatus, errorThrown) {    
  213.                     alert("系统ajax交互错误: " + textStatus);    
  214.                 },    
  215.                 success : function(data, textStatus) {    
  216.                     if (data.ajaxResult == "success") {    
  217.                         $("#gridTable").jqGrid("delRowData", pId);    
  218.                         consoleDlg.dialog("close");    
  219.                         alert("联系人删除成功!");    
  220.                     } else {    
  221.                         alert("删除操作失败!");    
  222.                     }    
  223.                 }    
  224.             });    
  225.         };    

原文链接：点击打开链接

猜你喜欢

转载自blog.csdn.net/qq_36688143/article/details/79802623
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022