自己动手制作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 获取URL参数的插件
Mar 04 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
javascript每日必学之多态
Feb 23 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
如何理解Vue的v-model指令的使用方法
Jul 19 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的人气开发框架Laravel
2015/10/15 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
医院实习介绍信
2014/01/12 职场文书
新党章的学习心得体会
2014/11/07 职场文书
求职信如何撰写?
2019/05/22 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers