Jqgrid教程(简单上手)



这里不用我多说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" οnclick="openDialog4Adding()">添加</button> 
		<button class="right-button02" οnclick="openDialog4Updating()">修改</button> 
	 	<button class="right-button02" οnclick="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的灵活使用会在稍后介绍。如有不足之处,还望多多指正











  • 28
    点赞
  • 126
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jqGrid 是一款基于 jQuery 的表格插件,它可以快速地将数据以表格形式呈现在网页上,并且支持分页、排序、筛选、编辑等功能。下面是 jqGrid 5.8.2 的使用教程: 1. 引入必需的文件 在 HTML 页面中引入 jQuery 和 jqGrid 的 CSS 和 JavaScript 文件: ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/5.8.2/css/ui.jqgrid.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/5.8.2/jquery.jqgrid.min.js"></script> ``` 2. 创建表格 在 HTML 页面中创建一个空的 `<table>` 标签,用于显示表格: ```html <table id="myGrid"></table> ``` 然后在 JavaScript 中定义表格的配置项: ```javascript var myGrid = $("#myGrid"); myGrid.jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 150 }, { name: "age", label: "Age", width: 50 }, { name: "email", label: "Email", width: 200 } ], autowidth: true, height: "auto", rowNum: 10, pager: true, caption: "My Grid" }); ``` 上述代码中,`url` 属性指定了表格要加载的数据源,`datatype` 属性指定了数据源的类型(这里是 JSON),`colModel` 属性指定了表格的列模型,`autowidth` 属性开启了自动宽度,`height` 属性指定了表格的高度(这里是自适应高度),`rowNum` 属性指定了每页显示的行数,`pager` 属性开启了分页功能,`caption` 属性指定了表格的标题。 3. 加载数据 在上述代码中,我们指定了表格的数据源为 `data.json`,因此需要在服务器端生成这个数据源。数据源的格式如下: ```json { "page": 1, "total": 3, "records": 30, "rows": [ { "id": 1, "name": "John", "age": 30, "email": "john@example.com" }, { "id": 2, "name": "Mary", "age": 25, "email": "mary@example.com" }, { "id": 3, "name": "Peter", "age": 35, "email": "peter@example.com" }, ... ] } ``` 其中,`page` 属性表示当前页码,`total` 属性表示总页数,`records` 属性表示总记录数,`rows` 属性表示当前页的数据行。 4. 其他功能 除了上述功能外,jqGrid 还支持许多其他功能,比如排序、筛选、编辑等。具体使用方法可以参考 jqGrid 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值