自己动手制作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 相关文章推荐
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
深入理解js数组的sort排序
May 28 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python实现FLV视频拼接功能
2020/01/21 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
求职简历中自我评价
2014/01/28 职场文书
亚运会口号
2014/06/20 职场文书
学校献爱心活动总结
2014/07/08 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
警告通知
2015/04/25 职场文书
承诺书范本大全
2015/05/04 职场文书
小马王观后感
2015/06/11 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
全新239军机修复记
2022/04/05 无线电