自己动手制作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 相关文章推荐
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
实例讲解PHP表单处理
2019/02/15 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python运算符+与+=的方法实例
2021/02/18 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
Servlet方面面试题
2016/09/28 面试题
住宅质量保证书
2014/04/29 职场文书
法律顾问服务方案
2014/05/15 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
大学推普周活动总结
2015/05/07 职场文书
婚庆主持词大全
2015/06/30 职场文书
2015年征兵工作总结
2015/07/23 职场文书
如何书写授权委托书?
2019/06/25 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Redis批量生成数据的实现
2022/06/05 Redis