快捷導(dǎo)航

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

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

這個插件的上篇訪問量很不好，幾乎是我寫的文章里最少的點擊量的了，不知道是不是因為大家對我說的這個插件不感興趣還是說我寫的東西技術(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ǔ)知識，接下來就是完成這此功能了，我盡量寫得吸引人眼球一點，首先，我們要完成最基礎(chǔ)的復(fù)制行功能，很多人，都偏愛于去拼接html代碼，他們覺得這個插件的入口應(yīng)該是傳入一段HTML代碼后，你再對這個HTML進(jìn)行模版復(fù)制，我不能說這種做法是錯誤的，因為它也確實能夠完成這項工作，但是如果你要復(fù)制的行的代碼比較多，又有復(fù)雜一點的控件，如存在日歷或城市三級菜單等，這樣你就很不易維護(hù)了，我們做前端的，就是為了讓做程序的做更少的事，讓用戶更快捷方便的體驗。所以我盡量不讓程序去進(jìn)行轉(zhuǎn)義拼接代碼，把這些工作留給JS，jquery中有個clone(bool)的方法很好用，它有一個

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

復(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)為不錯且實用的小工具，以后調(diào)用，就只需要在html里設(shè)置相對應(yīng)的class就行了，多么easy，是否也happy呢？那就不得而知，代碼比較粗糙，如有高手，可以幫我改進(jìn)下，歡迎大家一起探討，自所謂送人菊花，留有余香，大家加我Q群一起學(xué)習(xí)進(jìn)步吧！70210212或77813547.

您可能感興趣的文章: