（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）相关的知识，希望对你有一定的参考价值。
如果友好的方法，可以在加分？（我实在自己的插件里添加方法，不是需要插件）
要对话框中生成form的可以看jquery ui demo中dialog文件夹下modal-form.html 参考技术A 实际上是通过click事件生成了一个DIV,并将期浮动于原页面之上.
你可以下载一个叫lhgdialog的jquery组件.可以实现这个功能.
可以支持HTML内容弹出和页面弹出.
同时可以设置弹出DIV的大小,是否可以移动,出现位置,是否遮罩原层等等.追问
我是在插件里写这个东西，不是需要插件来完成？求好方法？
追答你在哪里看到这个例子的?
直接用IE8或者FF做监视调式就可以了啊,看他的add启动了哪个事件,或者说,所属的DIV或者其他什么元素class绑定了哪个方法.
如果你确定这个是jqgrid组件内部就可以完成的效果,你把他调用的function跟踪出来就可以了.
大概就是触发click事件，弹出一个dialog，点击确定按钮，把数据追加到table里
其实嘛挺简单的，写起来就费事 参考技术C 推荐你看一个jquery ui组件 功能超强大 你要的里面都有 对你写jquery插件很有帮组
组件名称jquery easyui 参考技术D 这是我原先写的小例子，可能有用
<%@ 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>本回答被提问者采纳
掌握jQuery插件开发 这篇文章就够了
微信ID： (点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（页底留言开放，欢迎来吐槽）
● ● ●
在实际开发工作中，总会碰到像滚动，分页，日历等展示效果的业务需求，对于接触过jQuery以及熟悉jQuery使用的人来说，首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件，都有多种jQuery插件可供选择，网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷，但是如果只是会简单使用，而对其中的原理不甚了解，那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。
进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？
第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。
我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。
基础版jQuery插件
知道了上面这些知识，我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色，就可以按下面的方式来实现这个插件：
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
}
然后按下面的方式来使用插件：
$("p").changeStyle("red");
插件调用的时候，插件内部的this就是当前调用插件的jQuery对象，这样的话每个使用$()方法选择的标签，在调用changeStyle()插件时都会使用css()方法重设color样式。
满足链式调用的jQuery插件
链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。实现链式调用的方式也很简单：
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
然后使用的时候就可以链式调用其他方法了：
$("p").changeStyle("red").addClass("red-color");
实现链式调用的关键点就一行代码return this，插件中加了这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。
防止$符号污染的jQuery插件
有很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下：
(function($){
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
})(jQuery);
因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$符号的污染。
可以接受参数的jQuery插件
继续上面的例子，假如我还想为这个插件添加一个设置标签元素内容文字大小的功能，那么我可以这么来实现：
(function($){
$.fn.changeStyle = function(colorStr，fontSize){
this.css("color",colorStr).css("fontSize",fontSize+"px");
return this;
}
})(jQuery);
上面这种插件传参方式适用于参数比较少的情况，如果需要传给插件内部的参数比较多，我们可以定义一个参数对象，然后把需要传给插件的参数放在参数对象中。插件定义时如下：
(function($){
$.fn.changeStyle = function(option){
this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");
return this;
}
})(jQuery);
使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});
把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值，例如：
(function($){
$.fn.changeStyle = function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
})(jQuery);
上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。
总结
定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。类似下面的写法：
(function($){
$.fn.extend({
changeStyle:function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
});
})(jQuery);
PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。
干货！免费领取腾讯高级讲师网页设计教程
☝☝☝
关注网页设计自学平台，99%的努力都在这里
以上是关于（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）的主要内容，如果未能解决你的问题，请参考以下文章