快捷導(dǎo)航

關(guān)于jquery動(dòng)態(tài)增減控件的一些想法和小插件

更新時(shí)間：2010年08月01日 10:32:52 作者：

這段代碼壓縮到100行內(nèi)，而且擴(kuò)展方便，可以非常輕松的增減控件的數(shù)量,使用非常簡(jiǎn)單。

去年做項(xiàng)目時(shí)遇到一個(gè)模塊，需要能夠動(dòng)態(tài)的增減控件。當(dāng)初第一個(gè)解決方案是用UpdatePanel做頁(yè)面的局部更新。由于頁(yè)面很大，而且控件非常多，當(dāng)動(dòng)態(tài)增加的控件非常多的時(shí)候，會(huì)變得很慢。后來(lái)就想著用javascript做動(dòng)態(tài)的增減控件，最后在提交頁(yè)面的時(shí)候搜集頁(yè)面控件的數(shù)據(jù)，效果很棒，但是由于當(dāng)時(shí)僅僅是為那一個(gè)模塊做，所以擴(kuò)展性很差，而且那時(shí)寫javascript代碼非常復(fù)雜，僅僅為了動(dòng)態(tài)增減的效果，就寫超過(guò)了500行javascript代碼。

后來(lái)去年末時(shí)間空閑下來(lái)的時(shí)候重寫了這段代碼，現(xiàn)在這段代碼壓縮到100行內(nèi)，而且擴(kuò)展方便，可以非常輕松的增減控件的數(shù)量,使用非常簡(jiǎn)單。

效果圖：

一個(gè)簡(jiǎn)單的例子:

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

 
<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> 
$(function(){ 
$("table").dynamicAddRemover(); 
}); 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html> 

加了限制個(gè)數(shù)事件后的例子：

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

 
<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> 

$(function(){ 
$("#table1").dynamicAddRemover({ 
addedEvent:function(newCtl, options){ 
//clear the textbox. 
newCtl.find(":text").val(''); 
if($("table").size() > 5) 
{ 
//hide the add button. 
newCtl.find("img[id$='" + options.adderId + "']").hide(); 
} 
}, 
removedEvent:function(prevCtl, nextCtl, options){ 
if($("table").size() <= 5) 
{ 
//show the add button. 
$("table:last").find("img[id$='" + options.adderId + "']").show(); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 
<table id='table1'> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html> 

參數(shù)的定義：

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

 
rootWrapper default: "table" 
根容器，就是需要增減的控件的根容器，目前代碼上僅僅支持table根容器。 
adderId default:"imgExpBtn" 
增加按鈕的Id。 
removerId default:"imgColBtn" 
刪除按鈕的Id。 
addingEvent default:null 
在增加事件之前所觸發(fā)的自定義事件，參數(shù)為newWrapper和options, newWrapper為新增的控件的父容器，options為參數(shù)列表自己。 
addedEvent default:null 
在增加事件之后所觸發(fā)的自定義事件，參數(shù)為newWrapper和options, newWrapper為新增的控件的父容器，options為參數(shù)列表自己。 
removingEvent default:null 
在刪除事件之前所觸發(fā)的自定義事件，參數(shù)為refWrapper和options, reWrapper為被刪除的控件的父容器，options為參數(shù)列表自己。 
removedEvent default:null 
在刪除事件之后所觸發(fā)的自定義事件，參數(shù)為prevWrapper，nextWrapper和options, prevWrapper為被刪除的父容器的上一個(gè)容器，nextWrapper為被刪除的父容器的下一個(gè)容器，，options為參數(shù)列表自己。 
collapseImgUrl default:'icon_collapse.gif' 
增加按鈕的路徑 
expandImgUrl default:'icon_expand.gif' 
刪除按鈕的路徑 

注意事項(xiàng)：
.可以添加在增減過(guò)程中需要的自定義參數(shù)和變量，如： $("table").dynamicAddRemover({param1:"param1", param2:"param2"});
使用時(shí)，如:options.param1等等。
.根容器必須有唯一Id且指定時(shí)必須唯一。如果有多個(gè)模塊(多個(gè)根容器)需要使用可以這樣：$("#table1").dynamicAddRemover(),$("#table2").dynamicAddRemover()等等。
.新添加的控件里的Id和name并沒有更新，如果有特別業(yè)務(wù)需要，請(qǐng)?jiān)赼ddedEvent里添加生成新Id的業(yè)務(wù)邏輯。
.本插件需要Jquery 1.2.6版本以上支持。

源代碼和原理很簡(jiǎn)單，僅僅作為一個(gè)拋磚引玉的作用。以下是包括源代碼的附件。
dynamicAddRemover.rar