关于javascript动态增减控件的一些想法和小插件
去年做项目时遇到一个模块,需要能够动态的增减控件。当初第一个解决方案是用UpdatePanel做页面的局部更新。由于页面很大,而且控件非常多,当动态增加的控件非常多的时候,会变得很慢。后来就想着用javascript做动态的增减控件,最后在提交页面的时候搜集页面控件的数据,效果很棒,但是由于当时仅仅是为那一个模块做,所以扩展性很差,而且那时写javascript代码非常复杂,仅仅为了动态增减的效果,就写超过了500行javascript代码。
后来去年末时间空闲下来的时候重写了这段代码,现在这段代码压缩到100行内,而且扩展方便,可以非常轻松的增减控件的数量,使用非常简单。
一个简单的例子:
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <html>
3 <head>
4 <title></title>
5 <script language="javascript" src="jquery-1.4.2.min.js"></script>
6 <script language="javascript" src="dynamicAddRemover.js"></script>
7 <script language="javascript">
8 $(function(){
9 $("table").dynamicAddRemover();
10 });
11 </script>
12 </head>
13 <body>
14 <table>
15 <tr>
16 <td>
17 <select>
18 <option value ="volvo">Volvo</option>
19 <option value ="saab">Saab</option>
20 <option value="opel">Opel</option>
21 <option value="audi">Audi</option>
22 </select>
23 <input type="text" name="text1" id="text1" value="Text"></input>
24 <button type="button" name="btn1" value="btn1" id="btn1" >Button</button>
25 </td>
26 </tr>
27 </table>
28 </body>
29 </html>
2 <html>
3 <head>
4 <title></title>
5 <script language="javascript" src="jquery-1.4.2.min.js"></script>
6 <script language="javascript" src="dynamicAddRemover.js"></script>
7 <script language="javascript">
8 $(function(){
9 $("table").dynamicAddRemover();
10 });
11 </script>
12 </head>
13 <body>
14 <table>
15 <tr>
16 <td>
17 <select>
18 <option value ="volvo">Volvo</option>
19 <option value ="saab">Saab</option>
20 <option value="opel">Opel</option>
21 <option value="audi">Audi</option>
22 </select>
23 <input type="text" name="text1" id="text1" value="Text"></input>
24 <button type="button" name="btn1" value="btn1" id="btn1" >Button</button>
25 </td>
26 </tr>
27 </table>
28 </body>
29 </html>
加了限制个数事件后的例子:
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <html>
3 <head>
4 <title></title>
5 <script language="javascript" src="jquery-1.4.2.min.js"></script>
6 <script language="javascript" src="dynamicAddRemover.js"></script>
7 <script language="javascript">
8
9 $(function(){
10 $("#table1").dynamicAddRemover({
11 addedEvent:function(newCtl, options){
12 //clear the textbox.
13 newCtl.find(":text").val('');
14 if($("table").size() > 5)
15 {
16 //hide the add button.
17 newCtl.find("img[id$='" + options.adderId + "']").hide();
18 }
19 },
20 removedEvent:function(prevCtl, nextCtl, options){
21 if($("table").size() <= 5)
22 {
23 //show the add button.
24 $("table:last").find("img[id$='" + options.adderId + "']").show();
25 }
26 }
27 });
28 });
29 </script>
30 </head>
31 <body>
32 <table id='table1'>
33 <tr>
34 <td>
35 <select>
36 <option value ="volvo">Volvo</option>
37 <option value ="saab">Saab</option>
38 <option value="opel">Opel</option>
39 <option value="audi">Audi</option>
40 </select>
41 <input type="text" name="text1" id="text1" value="Text"></input>
42 <button type="button" name="btn1" value="btn1" id="btn1" >Button</button>
43 </td>
44 </tr>
45 </table>
46 </body>
47 </html>
2 <html>
3 <head>
4 <title></title>
5 <script language="javascript" src="jquery-1.4.2.min.js"></script>
6 <script language="javascript" src="dynamicAddRemover.js"></script>
7 <script language="javascript">
8
9 $(function(){
10 $("#table1").dynamicAddRemover({
11 addedEvent:function(newCtl, options){
12 //clear the textbox.
13 newCtl.find(":text").val('');
14 if($("table").size() > 5)
15 {
16 //hide the add button.
17 newCtl.find("img[id$='" + options.adderId + "']").hide();
18 }
19 },
20 removedEvent:function(prevCtl, nextCtl, options){
21 if($("table").size() <= 5)
22 {
23 //show the add button.
24 $("table:last").find("img[id$='" + options.adderId + "']").show();
25 }
26 }
27 });
28 });
29 </script>
30 </head>
31 <body>
32 <table id='table1'>
33 <tr>
34 <td>
35 <select>
36 <option value ="volvo">Volvo</option>
37 <option value ="saab">Saab</option>
38 <option value="opel">Opel</option>
39 <option value="audi">Audi</option>
40 </select>
41 <input type="text" name="text1" id="text1" value="Text"></input>
42 <button type="button" name="btn1" value="btn1" id="btn1" >Button</button>
43 </td>
44 </tr>
45 </table>
46 </body>
47 </html>
参数的定义:
rootWrapper | default: "table" |
根容器,就是需要增减的控件的根容器,目前代码上仅仅支持table根容器。 | |
adderId | default:"imgExpBtn" |
增加按钮的Id。 | |
removerId | default:"imgColBtn" |
删除按钮的Id。 | |
addingEvent | default:null |
在增加事件之前所触发的自定义事件,参数为newWrapper和options, newWrapper为新增的控件的父容器,options为参数列表自己。 | |
addedEvent | default:null |
在增加事件之后所触发的自定义事件,参数为newWrapper和options, newWrapper为新增的控件的父容器,options为参数列表自己。 | |
removingEvent | default:null |
在删除事件之前所触发的自定义事件,参数为refWrapper和options, reWrapper为被删除的控件的父容器,options为参数列表自己。 | |
removedEvent | default:null |
在删除事件之后所触发的自定义事件,参数为prevWrapper,nextWrapper和options, prevWrapper为被删除的父容器的上一个容器,nextWrapper为被删除的父容器的下一个容器,,options为参数列表自己。 | |
collapseImgUrl | default:'icon_collapse.gif' |
增加按钮的路径 | |
expandImgUrl | default:'icon_expand.gif' |
删除按钮的路径 |
注意事项:
1.可以添加在增减过程中需要的自定义参数和变量,如: $("table").dynamicAddRemover({param1:"param1", param2:"param2"});
使用时,如:options.param1等等。
2.根容器必须有唯一Id且指定时必须唯一。如果有多个模块(多个根容器)需要使用可以这样:$("#table1").dynamicAddRemover(),$("#table2").dynamicAddRemover()等等。
3.新添加的控件里的Id和name并没有更新,如果有特别业务需要,请在addedEvent里添加生成新Id的业务逻辑。
4.本插件需要Jquery 1.2.6版本以上支持。
一个人若不能在内心找到安宁,恐怕在哪里也无济于事。