自己动手制作jquery插件之自动添加删除行功能介绍


Posted in Javascript onOctober 14, 2011

这是一个我认为功能基本完善的插件,它包括添加、删除、插入、上下移动、索引标识、 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性。

     这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量的操作时,就可以用这个插件了。

     插件效果图如下:

 

自己动手制作jquery插件之自动添加删除行功能介绍

      在上篇里已经提到了一些制作jquery插件的基础知识,接下来就是完成这此功能了,我尽量写得吸引人眼球一点,首先,我们要完成最基础的复制行功能,很多人,都偏爱于去拼接html代码,他们觉得这个插件的入口应该是传入一段HTML代码后,你再对这个HTML进行模版复制,我不能说这种做法是错误的,因为它也确实能够完成这项工作,但是如果你要复制的行的代码比较多,又有复杂一点的控件,如存在日历或城市三级菜单等,这样你就很不易维护了,我们做前端的,就是为了让做程序的做更少的事,让用户更快捷方便的体验。所以我尽量不让程序去进行转义拼接代码,把这些工作留给JS,jquery中有个clone(bool)的方法很好用,它有一个

Boolean类型的参数,如果你要完全的复制某个dom对象,包括它上面的事件的话,就可以用clone(true)了,这样也少了再次绑定事件的困绕,所以这个插件的回调方法,其实很难用到。添加行的代码如下:
function addRow(num, isInsert, target) { 
for (var i = 0; i < num - count; i++) { 
var temp = content.find("." + settings.tempRowClass).first().clone(true); 
temp.find("input").val(""); 
temp.find("select").val("-1"); 
temp.find("textarea").val(""); 
temp.find(":checkbox").attr("checked", false); 
temp.attr("id", ""); 
temp.find("input,tr,textarea,select,:checkbox,tbody").attr("id", ""); 
if (temp.find(".richText").length > 0) { 
temp.find(".ke-container").remove(); 
} 
temp.find(".richText,input").each(function() { 
$(this).attr("id", "txt_" + Math.round(Math.random() * new Date().getTime())) 
$(this).show(); 
}); 
if (isInsert) { 
temp.insertBefore(target.closest("." + settings.tempRowClass)); 
} else { 
content.append(temp); 
} 
} 
if (num < count) { 
for (var j = count - 1; j >= num; j--) { 
delRow(content.find("."+settings.tempRowClass).eq(j)); 
} 
} else { 
if (settings.addCallBack) 
settings.addCallBack($(temp)); 
} 
count = content.find("." + settings.tempRowClass).length; 
settings.changeInput.val(count); 
sumIndex(); 
showhideBtn(); 
};

大家可能注意到,我在写这些方法的时候,都有在前面调用content然后再查找子集,这个是为了一个页面同时出现多次调用时,出现冲突的办法。

这个插件写到这就基本上算是完成了, 区区百来行代码,就完成了一个我认为不错且实用的小工具,以后调用,就只需要在html里设置相对应的class就行了,多么easy,是否也happy呢?那就不得而知,代码比较粗糙,如有高手,可以帮我改进下,欢迎大家一起探讨,自所谓送人菊花,留有余香,大家加我Q群一起学习进步吧!70210212或77813547.

Javascript 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
微信小程序 开发之全局配置
May 05 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 #Javascript
获取body标签的两种方法
Oct 13 #Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 #Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 #Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 #Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 #Javascript
Javascript insertAfter() 实现函数代码
Oct 12 #Javascript
You might like
PHP安全上传图片的方法
2015/03/21 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
原生js调用json方法总结
2018/02/22 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
详解Python:面向对象编程
2019/04/10 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
解决yum对python依赖版本问题
2019/07/05 Python
python 循环数据赋值实例
2019/12/02 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
学生党员的自我评价范文
2014/03/01 职场文书
毕业生就业协议书
2014/04/11 职场文书
大学生标准自荐书
2014/06/15 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书