快捷導(dǎo)航

自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行功能介紹

更新時(shí)間：2011年10月14日 16:17:45 作者：

這個(gè)插件的上篇訪問(wèn)量很不好，幾乎是我寫(xiě)的文章里最少的點(diǎn)擊量的了，不知道是不是因?yàn)榇蠹覍?duì)我說(shuō)的這個(gè)插件不感興趣還是說(shuō)我寫(xiě)的東西技術(shù)含量太差了，呵，那我只能孤芳自賞了

這是一個(gè)我認(rèn)為功能基本完善的插件，它包括添加、刪除、插入、上下移動(dòng)、索引標(biāo)識(shí)、數(shù)量控制等功能，基本上能滿足大部分多行添加的需求，當(dāng)然，在完成這些功能的前提下，我也盡量保持較少的代碼量和易理解的邏輯性。

這個(gè)插件的演示頁(yè)面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ，引用自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行(上)里的介紹，這是一個(gè)簡(jiǎn)單的插件，它的作用是:一個(gè)系統(tǒng)中有大量的需要對(duì)一個(gè)行進(jìn)行復(fù)制添加，希望能夠進(jìn)行批量的操作時(shí)，就可以用這個(gè)插件了。

插件效果圖如下：

在上篇里已經(jīng)提到了一些制作jquery插件的基礎(chǔ)知識(shí)，接下來(lái)就是完成這此功能了，我盡量寫(xiě)得吸引人眼球一點(diǎn)，首先，我們要完成最基礎(chǔ)的復(fù)制行功能，很多人，都偏愛(ài)于去拼接html代碼，他們覺(jué)得這個(gè)插件的入口應(yīng)該是傳入一段HTML代碼后，你再對(duì)這個(gè)HTML進(jìn)行模版復(fù)制，我不能說(shuō)這種做法是錯(cuò)誤的，因?yàn)樗泊_實(shí)能夠完成這項(xiàng)工作，但是如果你要復(fù)制的行的代碼比較多，又有復(fù)雜一點(diǎn)的控件，如存在日歷或城市三級(jí)菜單等，這樣你就很不易維護(hù)了，我們做前端的，就是為了讓做程序的做更少的事，讓用戶更快捷方便的體驗(yàn)。所以我盡量不讓程序去進(jìn)行轉(zhuǎn)義拼接代碼，把這些工作留給JS，jquery中有個(gè)clone(bool)的方法很好用，它有一個(gè)

Boolean類(lèi)型的參數(shù)，如果你要完全的復(fù)制某個(gè)dom對(duì)象，包括它上面的事件的話，就可以用clone(true)了，這樣也少了再次綁定事件的困繞，所以這個(gè)插件的回調(diào)方法，其實(shí)很難用到。添加行的代碼如下：

復(fù)制代碼代碼如下:

 
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(); 
}; 

大家可能注意到，我在寫(xiě)這些方法的時(shí)候，都有在前面調(diào)用content然后再查找子集，這個(gè)是為了一個(gè)頁(yè)面同時(shí)出現(xiàn)多次調(diào)用時(shí)，出現(xiàn)沖突的辦法。

這個(gè)插件寫(xiě)到這就基本上算是完成了，區(qū)區(qū)百來(lái)行代碼，就完成了一個(gè)我認(rèn)為不錯(cuò)且實(shí)用的小工具，以后調(diào)用，就只需要在html里設(shè)置相對(duì)應(yīng)的class就行了，多么easy，是否也happy呢？那就不得而知，代碼比較粗糙，如有高手，可以幫我改進(jìn)下，歡迎大家一起探討，自所謂送人菊花，留有余香，大家加我Q群一起學(xué)習(xí)進(jìn)步吧！70210212或77813547.

您可能感興趣的文章: