关于jquery动态增减控件的一些想法和小插件


Posted in Javascript onAugust 01, 2010

去年做项目时遇到一个模块,需要能够动态的增减控件。当初第一个解决方案是用UpdatePanel做页面的局部更新。由于页面很大,而且控件非常多,当动态增加的控件非常多的时候,会变得很慢。后来就想着用javascript做动态的增减控件,最后在提交页面的时候搜集页面控件的数据,效果很棒,但是由于当时仅仅是为那一个模块做,所以扩展性很差,而且那时写javascript代码非常复杂,仅仅为了动态增减的效果,就写超过了500行javascript代码。

后来去年末时间空闲下来的时候重写了这段代码,现在这段代码压缩到100行内,而且扩展方便,可以非常轻松的增减控件的数量,使用非常简单。

效果图:
关于jquery动态增减控件的一些想法和小插件
一个简单的例子:

<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> 
$(function(){ 
$("table").dynamicAddRemover(); 
}); 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html>

加了限制个数事件后的例子:
<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> $(function(){ 
$("#table1").dynamicAddRemover({ 
addedEvent:function(newCtl, options){ 
//clear the textbox. 
newCtl.find(":text").val(''); 
if($("table").size() > 5) 
{ 
//hide the add button. 
newCtl.find("img[id$='" + options.adderId + "']").hide(); 
} 
}, 
removedEvent:function(prevCtl, nextCtl, options){ 
if($("table").size() <= 5) 
{ 
//show the add button. 
$("table:last").find("img[id$='" + options.adderId + "']").show(); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 
<table id='table1'> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html>

参数的定义:
rootWrapper default: "table" 
根容器,就是需要增减的控件的根容器,目前代码上仅仅支持table根容器。 
adderId default:"imgExpBtn" 
增加按钮的Id。 
removerId default:"imgColBtn" 
删除按钮的Id。 
addingEvent default:null 
在增加事件之前所触发的自定义事件,参数为newWrapper和options, newWrapper为新增的控件的父容器,options为参数列表自己。 
addedEvent default:null 
在增加事件之后所触发的自定义事件,参数为newWrapper和options, newWrapper为新增的控件的父容器,options为参数列表自己。 
removingEvent default:null 
在删除事件之前所触发的自定义事件,参数为refWrapper和options, reWrapper为被删除的控件的父容器,options为参数列表自己。 
removedEvent default:null 
在删除事件之后所触发的自定义事件,参数为prevWrapper,nextWrapper和options, prevWrapper为被删除的父容器的上一个容器,nextWrapper为被删除的父容器的下一个容器,,options为参数列表自己。 
collapseImgUrl default:'icon_collapse.gif' 
增加按钮的路径 
expandImgUrl default:'icon_expand.gif' 
删除按钮的路径

注意事项:
.可以添加在增减过程中需要的自定义参数和变量,如: $("table").dynamicAddRemover({param1:"param1", param2:"param2"});
使用时,如:options.param1等等。
.根容器必须有唯一Id且指定时必须唯一。如果有多个模块(多个根容器)需要使用可以这样:$("#table1").dynamicAddRemover(),$("#table2").dynamicAddRemover()等等。
.新添加的控件里的Id和name并没有更新,如果有特别业务需要,请在addedEvent里添加生成新Id的业务逻辑。
.本插件需要Jquery 1.2.6版本以上支持。

源代码和原理很简单,仅仅作为一个抛砖引玉的作用。以下是包括源代码的附件。
dynamicAddRemover.rar

Javascript 相关文章推荐
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue实现记事本功能
Jun 26 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
Paypal支付不完全指北
Jun 04 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
动态调用CSS文件的JS代码
Jul 29 #Javascript
date.parse在IE和FF中的区别
Jul 29 #Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 #Javascript
You might like
php与java通过socket通信的实现代码
2013/10/21 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python 转换文本编码实现解析
2019/08/27 Python
python实现的发邮件功能示例
2019/09/11 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
详解Python IO口多路复用
2020/06/17 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
会计毕业生自荐书
2014/06/12 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
农村党员干部承诺书
2015/05/04 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
导游词之长城八达岭
2019/09/24 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server