快捷導(dǎo)航

自己動手制作jquery插件之自動添加刪除行功能介紹

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

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

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

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

插件效果圖如下：

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

Boolean類型的參數(shù)，如果你要完全的復(fù)制某個dom對象，包括它上面的事件的話，就可以用clone(true)了，這樣也少了再次綁定事件的困繞，所以這個插件的回調(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(); 
}; 

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

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

您可能感興趣的文章: