码迷，mamicode.com
首页 > 其他好文 > 详细

Jqgrid教程（简单上手）

时间：2016-07-13 16:58:32      阅读：431      评论：0      收藏：0      [点我收藏+]

标签：



这里不用我多说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    


 grid.locale-cn.js


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


jquery-ui.css  


jquery-ui.js   


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


 ui.jqgrid-bootstrap.css




bootstrap.min.js


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


下面是我的一个demo案例：














<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
	<table id="list"></table>
</body>
</html>

<script type="text/javascript">
$("#list").jqGrid({        
   	url:'server.php?q=2',//请求数据的地址
	datatype: "json",
   	colNames:['Id','姓名', '年龄'],
	//jqgrid主要通过下面的索引信息与后台传过来的值对应
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'name',index:'invdate', width:90},
   		{name:'age',index:'name', width:100}
      	],
   	caption:"我是jqgrid的标题",
});
</script>


上面是一个最基本的jqgrid数据显示，接下来是在这个基础上增加一些附加功能：



1.分页功能信息显示：




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
	<table id="list"></table>
<span style="background-color: rgb(204, 204, 204);">	<div id="pager"></div></span>
</body>
</html>

<script type="text/javascript">
$("#list").jqGrid({        
   	url:'server.php?q=2',//请求数据的地址
	datatype: "json",
   	colNames:['Id','姓名', '年龄'],
	//jqgrid主要通过下面的索引信息与后台传过来的值对应
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'name',index:'invdate', width:90},
   		{name:'age',index:'name', width:100}
      	],
   	caption:"我是jqgrid的标题",
<span style="background-color: rgb(204, 204, 204);">    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true</span>
});

</script>








2.显示系统默认的添加，修改，删除，查询，更新按钮。

技术分享






<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"<span style="white-space:pre">	</span>href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
<span style="white-space:pre">	</span><table id="list"></table>
<span style="white-space:pre">	</span><div id="pager"></div>
</body>


<script type="text/javascript">
$("#list").jqGrid({        
   <span style="white-space:pre">	</span>url:'server.php?q=2',//请求数据的地址
<span style="white-space:pre">	</span>datatype: "json",
   <span style="white-space:pre">	</span>colNames:['Id','姓名', '年龄'],
<span style="white-space:pre">	</span>//jqgrid主要通过下面的索引信息与后台传过来的值对应
   <span style="white-space:pre">	</span>colModel:[
   <span style="white-space:pre">		</span>{name:'id',index:'id', width:200},
   <span style="white-space:pre">		</span>{name:'name',index:'invdate', width:200},
   <span style="white-space:pre">		</span>{name:'age',index:'name', width:300}
      <span style="white-space:pre">	</span>],
   <span style="white-space:pre">	</span>caption:"我是jqgrid的标题",
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {
    add : true,
    del : true,
    edit : true,
    position : 'left',
   });
</script>
</html>









3.可以为添加修改删除指定我们自定义的事件：



<script type="text/javascript">

var openDialog4Adding = function() {  
	alert("add Demo");
	
};  
var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数  
	alert("update Demo");
};  
var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数  
	alert("delete Demo");
};  


$("#list").jqGrid({        
   	url:'server.php?q=2',//请求数据的地址
	datatype: "json",
   	colNames:['Id','姓名', '年龄'],
	//jqgrid主要通过下面的索引信息与后台传过来的值对应
   	colModel:[
   		{name:'id',index:'id', width:200},
   		{name:'name',index:'invdate', width:200},
   		{name:'age',index:'name', width:300}
      	],
   	caption:"我是jqgrid的标题",
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {
    add : true,
    del : true,
    edit : true,
    position : 'left',
    addfunc : openDialog4Adding,    // (1) 点击添加按钮，则调用openDialog4Adding方法  
    editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法  
    delfunc : openDialog4Deleting,  // (3) 点击删除按钮，则调用openDialog4Deleting方法  
    alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息  
  });
  
</script>


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



技术分享需要在html中加入下面代码：


     <div>
        <button class="right-button02" onclick="openDialog4Adding()">添加</button> 
		<button class="right-button02" onclick="openDialog4Updating()">修改</button> 
	 	<button class="right-button02" onclick="openDialog4Deleting()">删除</button>
     
     </div>
     <div id="consoleDlg">
			<div id="formContainer">
				<form id="consoleForm">
				    <input type="hidden" id="selectId" />
					<table class="formTable">
						<tr>
							<th>
								姓名：
							</th>
							<td>
								<input type="text" class="textField" id="ename"
									name="ename" />
							</td>
						</tr>
						<tr>
							<th id="thusergender">
								性  别：
							</th>
							<td>
								<input type="text" class="textField" id="esex"
									name="esex" />
							</td>
						</tr>
						<tr>
							<th>
								出生日期：
							</th>
							<td>
								<input type="text" class="textField" id="birthday"
									name="birthday" />
							</td>
						</tr>
						<tr>
							<th>
								部门：
							</th>
							<td>
								<input type="text" class="textField" id="department"
									name="department" />
							</td>
						</tr>
						<tr>
							<th>
								备注：
							</th>
							<td>
								<input type="text" class="textField" id="eremark"
									name="eremark" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>                    
	
然后再写js代码：



// 配置对话框  
    $("#consoleDlg").dialog({  
        autoOpen: false,      
        modal: true,    // 设置对话框为模态（modal）对话框  
        resizable: true,      
        width: 480,  
        buttons: {  // 为对话框添加按钮  
            "取消": function() {$("#consoleDlg").dialog("close")},  
            "添加": addEmployee,  
            "保存": updateEmployee,  
            "删除": deleteEmployee  
        }  
    });  

var openDialog4Adding = function() {  
	    var consoleDlg = $("#consoleDlg");  
	    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
	    consoleDlg.find("input").removeAttr("disabled").val("");  
	    dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('添加')").show();  
	    consoleDlg.dialog("option", "title", "添加员工信息 ").dialog("open");  
	};  
	var openDialog4Updating = function() {  
	    var consoleDlg = $("#consoleDlg");  
	    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
	      
	    consoleDlg.find("input").removeAttr("disabled");  
	    dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('保存')").show();  
	    consoleDlg.dialog("option", "title", "修改员工信息");  
	      
	    loadSelectedRowData();  
	}  
	var openDialog4Deleting = function() {  
	    var consoleDlg = $("#consoleDlg");  
	    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
	      
	    consoleDlg.find("input").attr("disabled", true);  
	    dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('删除')").show();  
	    consoleDlg.dialog("option", "title", "删除员工");  
	      
	    loadSelectedRowData();  
	}  
		    	  
     var loadSelectedRowData = function() {
			var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow");
			if (!selectedRowId) {
				hiAlert("请先选择需要编辑的行!");
				return false;
			} else {
				var params = {
					"employee.eid" : selectedRowId
				};
				// 从Server读取对应ID的JSON数据
				$.ajax( {
					url : "employee_find.action",
					data : params,
					dataType : "json",
					cache : false,
					error : function(textStatus, errorThrown) {
						hiAlert("系统ajax交互错误: " + textStatus);
					},
					success : function(data, textStatus) {
						// 如果读取结果成功，则将信息载入到对话框中					
					  var rowData = data.person;  
	    	    	  var consoleDlg = $("#consoleDlg");  
	    	    	  
	    	    	  consoleDlg.find("#selectId").val(rowData.id);  
				      consoleDlg.find("#ename").val(rowData.ename);  
				      consoleDlg.find("#esex").val(rowData.esex);  
				      consoleDlg.find("#birthday").val(rowData.birthday);  
				      consoleDlg.find("#department").val(rowData.department);  
				      consoleDlg.find("#eremark").val(rowData.eremark);  
					// 根据新载入的数据将表格中的对应数据行一并更新一下
					 var  dataRow = {  
    	    	                 id : data.employee.eid,   // 从Server端得到系统分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     eremark:eremark 
	    	                 };
		
					$("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);
		
					// 打开对话框
					consoleDlg.dialog("open");
				}
				});
		
			}
		}; 	      	  
  //数据更新 
   function updateEmployee() { 
	    	     var consoleDlg = $("#consoleDlg");      
	    	       
                 var eid = $.trim(consoleDlg.find("#selectId").val());  
			     var eanme = $.trim(consoleDlg.find("#eanme").val());  
			     var esex = $.trim(consoleDlg.find("#esex").val());  
			     var birthday = $.trim(consoleDlg.find("#birthday").val()); 
			     var department = $.trim(consoleDlg.find("#department").val()); 
			     var eremark = $.trim(consoleDlg.find("#eremark").val());    
	    	     var params = {  
	    	    	     "employee.eid" : eid,
				         "employee.ename" : ename,  
				         "employee.esex" : esex,
				         "employee.birthday" : birthday,  
				         "employee.department" : department,
				         "employee.eremark" : eremark   
	    	     };  
	    	     var actionUrl = "employee_update.action";  
	    	     $.ajax( {  
	    	         url : actionUrl,  
	    	         data : params,  
	    	         dataType : "json",  
	    	         cache : false,  
	    	         error : function(textStatus, errorThrown) {  
	    	             alert("系统ajax交互错误: " + textStatus);  
	    	         },  
	    	         success : function(data, textStatus) {  
	    	             if (data.ajaxResult == "success") {  
	    	                 var dataRow = {  
    	    	                 id : data.employee.eid,   // 从Server端得到系统分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     eremark:eremark 
	    	                 };  
	    	                 alert("联系人信息更新成功!");  
	    	                 consoleDlg.dialog("close");  
	    	                 $("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);  
	    	             } else {  
	    	                 alert("修改操作失败!");  
	    	             }  
	    	         }  
	    	     });  
    	    };
    	
var addEmployee = function() {  
    var consoleDlg = $("#consoleDlg");  
          
    var eanme = $.trim(consoleDlg.find("#eanme").val());  
	var esex = $.trim(consoleDlg.find("#esex").val());  
	var birthday = $.trim(consoleDlg.find("#birthday").val()); 
	var department = $.trim(consoleDlg.find("#department").val()); 
	var eremark = $.trim(consoleDlg.find("#eremark").val());  
      
    var params = {  
        "employee.ename" : ename,  
		"employee.esex" : esex,
		"employee.birthday" : birthday,  
		"employee.department" : department,
		"employee.eremark" : eremark   
    };  
      
     var actionUrl = "employee_add.action";
      
    $.ajax( {  
        url : actionUrl,  
        data : params,  
        dataType : "json",  
        cache : false,  
        error : function(textStatus, errorThrown) {  
            alert("系统ajax交互错误: " + textStatus);  
        },  
        success : function(data, textStatus) {  
            if(data.ajaxResult == "success") {  
                var dataRow = {  
                   id : data.employee.eid,   // 从Server端得到系统分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     eremark:eremark 
                };  
                  
                var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");  
                  
                if(srcrowid) {  
                    $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "before", srcrowid);
                      
                } else {  
                    $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "first");  
                }  
                consoleDlg.dialog("close");  
                  
                alert("联系人添加操作成功!");  
                  
            } else {  
                alert("添加操作失败!");  
            }  
        }  
    });  
};  

//数据删除
      var deleteEmployee = function() {  
		    var consoleDlg = $("#consoleDlg");  
		      
		    var pId = $.trim(consoleDlg.find("#selectId").val());  
		    var params = {  
		        "employee.eid" : pId  
		    };  
		    var actionUrl = "employee_delete.action";  
		    $.ajax({  
		        url : actionUrl,  
		        data : params,  
		        dataType : "json",  
		        cache : false,  
		        error : function(textStatus, errorThrown) {  
		            alert("系统ajax交互错误: " + textStatus);  
		        },  
		        success : function(data, textStatus) {  
		            if (data.ajaxResult == "success") {  
		                $("#gridTable").jqGrid("delRowData", pId);  
		                consoleDlg.dialog("close");  
		                alert("联系人删除成功!");  
		            } else {  
		                alert("删除操作失败!");  
		            }  
		        }  
		    });  
		};  
以上是我对jqgrid的基本用法的一个总结，关于对jqgrid与后台进行交互，如：Java中Struts2+Jqgrid的灵活使用会在稍后介绍。如有不足之处，还望多多指正



















































Jqgrid教程（简单上手）
标签：
原文地址：http://blog.csdn.net/chenjunjun79/article/details/51891611

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！