（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）

如果友好的方法，可以在加分？（我实在自己的插件里添加方法，不是需要插件）... 如果友好的方法，可以在加分？（我实在自己的插件里添加方法，不是需要插件）展开

 我来答

6个回答

#热议# 在购买新能源车时，要注意哪些？

shenchaoliang
2011-10-31 · TA获得超过1163个赞

知道大有可为答主

回答量：810

采纳率：0%

帮助的人：1518万

我也去答题访问个人页

关注

展开全部

要一模一样的看jqgird的editGridRow function，分开的是在grid.formedit.js 这个js里面
要对话框中生成form的可以看jquery ui demo中dialog文件夹下modal-form.html

已赞过 已踩过<

评论收起

kas68310
2011-10-30 · TA获得超过3637个赞

知道大有可为答主

回答量：1468

采纳率：33%

帮助的人：1181万

我也去答题访问个人页

关注

展开全部

实际上是通过click事件生成了一个DIV,并将期浮动于原页面之上.
你可以下载一个叫lhgdialog的jquery组件.可以实现这个功能.
可以支持HTML内容弹出和页面弹出.
同时可以设置弹出DIV的大小,是否可以移动,出现位置,是否遮罩原层等等.

追问

我是在插件里写这个东西，不是需要插件来完成？求好方法？

追答

你在哪里看到这个例子的?
直接用IE8或者FF做监视调式就可以了啊,看他的add启动了哪个事件,或者说,所属的DIV或者其他什么元素class绑定了哪个方法.
如果你确定这个是jqgrid组件内部就可以完成的效果,你把他调用的function跟踪出来就可以了.

已赞过 已踩过<

评论收起

lilo1001
2011-10-30 · TA获得超过188个赞

知道答主

回答量：172

采纳率：100%

帮助的人：92.4万

我也去答题访问个人页

关注

展开全部

这比较复杂。。。
大概就是触发click事件，弹出一个dialog，点击确定按钮，把数据追加到table里
其实嘛挺简单的，写起来就费事

已赞过 已踩过<

评论收起

匿名用户
2011-10-30

展开全部

推荐你看一个jquery ui组件功能超强大你要的里面都有对你写jquery插件很有帮组

组件名称jquery easyui

已赞过 已踩过<

评论收起

王火火他爸
推荐于2017-11-24 · TA获得超过144个赞

知道答主

回答量：139

采纳率：0%

帮助的人：31.4万

我也去答题访问个人页

关注

展开全部

这是我原先写的小例子，可能有用
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"></html>

<html>

<head>
    <title>员工信息</title>
    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     	<meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
        <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" />
		<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css"></link>
		<script type="text/javascript" src="js/js/grid.locale-cn.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){   
				    $("#gridTable").jqGrid({   
				        url:'employeeView.action',   
				        datatype: 'json',   
				        height: 350,   
				        colNames:['员工编号 ',' 姓名 ', '性别 ', '出生日期 ','部门 ','备注 '],
					   	colModel:[
					   		{name:'eid',index:'eid',width:80},
					   		{name:'ename',index:'ename asc, invdate', width:80},
					   		{name:'esex', index:'esex', width:80},
					   		{name:'birthday',    index:'birthday',width:120,  align:"right"},		
					   		{name:'department',  index:'department', width:120,  align:"right"},		
					   		{name:'eremark',   index:'eremark', width:150, sortable:false}		
					   	],
				        sortname:'id',   
				        //sortorder:'asc',   
				        viewrecords:true, 
				        pgtext:'第{0}页 共{1}页',
				        recordtext:'第 {0} - {1}条记录 ',  
				        rowNum:10,   
				        rowList:[10,20,30],   
				        jsonReader: {   
				            root:"dataRows",        // 数据行（默认为：rows）   
				            page: "pages",    // 当前页   
				            total: "totals",  // 总页数   
				            records: "records",  // 总记录数   
				            repeatitems : false     // 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设   
				        }, 
				        prmNames : {
							search : "search",
							rows:"pageModel.rows",
							page:"pageModel.page",
							//sort:"page.orderBy",
							//order:"page.order"
							}, 
				        pager:"#gridPager",  
				        caption: "员工信息 "
				});  

// 配置对话框  
			    $("#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("删除操作失败!");  
					            }  
					        }  
					    });  
					};  
		</script>
	 
  </head>
  <body> 
  
    <table id="gridTable"></table>  
    <div id="gridPager">
           
     </div>
     <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>                    
  </body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

更多回答（4）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）

其他类似问题

为你推荐：