如何实现一个js版的repeater?【示例代码下载】

Asp.net WebForm的repeater控件挺好用，我想用js实现一个在Ajax应用中也该还不错！半年前做了一个jQuery.Repeater插件，并用在了一个项目中，如今拿来晒晒！
 

原理

项模板为HTML代码，插件接收json数据源，读取模板并创新每一项。
 

模板HTML

1. <ul  id='repeater1'>  
2.       <li  class='itemtempplate'>{列名}</li>  
3. </ul> 

json数据源格式

自个捣鼓的东西格式就自个做主啦:-D . 如下：

1. {tablename:"表名",rows:[{"列1":"值1"},{"列2":"值2"}.....{"列n":"值n"}]} 

扩展原生String对象

为方便使用扩展一个String对象

1. //扩展String  
2. String.prototype.trim  =  function()  {    
3.         return  this.replace(/(^\s*)|(\s*$)/g,"");  
4. }  
5. //  
6. String.prototype.Replace=function  (str1,str2){  
7.         var  rs=this.replace(new  RegExp(str1,"gm"),str2);  
8.         return  rs;  
9. } 

将json字符串转为对象

1. //将json数据转为对象  
2. function    jsonStringToDataTable(jsondata){    
3.                 try{    
4.                         var    table=eval("("+jsondata+")");    
5.                 return    table;    
6.         }    
7.         catch(ex){    
8.                         return    null    ;    
9.         }    
10. }   

取网页元素自身HTML源码

由于有些浏览器(如firefox)不支持outerHTML,特写了一个toHTML的小插件。

1. //取自身HTML源码的插件.  
2. jQuery.fn.extend({    
3.                 toHTML:function(){    
4.                                 var    obj=$(this[0]);    
5.                                 if(obj[0].outerHTML){    
6.                                                 return    obj[0].outerHTML;    
7.                                 }    
8.                                 else{    
9.                                                     if($('.houfeng-hidearea')==null    ||    $('.houfeng-hidearea')[0]==null    ){    
10.                                                                 $('body').append("<div class='houfeng-hidearea' style='display:none;'></div>");    
11.                                                     }    
12.                                                     $('.houfeng-hidearea').css('display','none');    
13.                                                     $('.houfeng-hidearea').html('');    
14.                                                     obj.clone(true).prependTo('.houfeng-hidearea');    
15.                                                     var    rs=    $('.houfeng-hidearea').html();    
16.                                                     $('.houfeng-hidearea').html('');    
17.                                                     return    rs;    
18.                                     }    
19.                 }    
20. }); 

插件主要代码

1. jQuery.fn.extend({  
2.         Repeater:function(val,ItemCreatedCallBack){//设置或取得数据源  
3.                     this.each(function(){  
4.                             if(val==null  ||  val==undefined){//如果参数为空返回相应数据  
5.                                                 return  $(this).data("_DataSrc");//从缓存返回数据  
6.                             }  
7.                             else{//如果不为空设置数据源。  
8.                                             //  
9.                                             try{  
10.                                             var  valtype=(typeof  val).toString();  
11.                                             if(valtype=='string')  
12.                                                         val  =jsonStringToDataTable(val).rows;  
13.                                               }catch(ex){  
14.                                                         return  ;  
15.                                               }  
16.                                             //  
17.                                             var  domtype=$(this).find(".itemtemplate").attr('nodeName');//查找元素类型  
18.                                             //  
19.                                             if($(this).data("_ItemTemplate")==null  ){  
20.                                                     $(this).data("_ItemTemplate",$(this).find(".itemtemplate").toHTML());  
21.                                                     $(this).find(".itemtemplate").remove();  
22.                                             }    
23.                                             var  TrContentTemplate=$(this).data("_ItemTemplate");  
24.                                             //  
25.                                             var  fileds=____FindFiled(TrContentTemplate);//找到所有列  
26.                                             if(fileds==null  )return  false  ;  
27.                                             var  filedscount=fileds.length;//计算列数  
28.                                             ////  
29.                                             $(this).data("_DataSrc",val);  //将数据放入缓存  
30.                                             var  count=val.length;  
31.                                             for(var  i=0;i<count  ;i++){  
32.                                                   ////绑定列值  
33.                                                   var  NewTrContent=TrContentTemplate;  
34.                                                   //  
35.                                                   NewTrContent=NewTrContent.Replace("{{","{#");  
36.                                                   NewTrContent=NewTrContent.Replace("}}","#}");  
37.                                                   for(  var  j=0;j<filedscount;j++){  
38.                                                               NewTrContent=NewTrContent.Replace("{"+fileds[j]+"}",val[i][fileds[j].trim()]);  
39.                                                   }  
40.                                                   NewTrContent=NewTrContent.Replace("{#","{");  
41.                                                   NewTrContent=NewTrContent.Replace("#}","}");  
42.                                                   //  
43.                                                   var  area=$(this).find('tbody');  
44.                                                   if(area  ==null  )  
45.                                                                 area  =$(this);  
46.                                                   //  
47.                                                   area.append(NewTrContent);  
48.                                                   if(ItemCreatedCallBack!=null  ){  
49.                                                         ItemCreatedCallBack($(this).find(domtype+":last"));  
50.                                                   }  
51.                                             }  
52.                                             //  
53.                                             $(this).RepeaterSetItemClass($(this).data("_class1"),$(this).data("_class2"),$(this).data("_hoverClass"));  
54.                             }  
55.                     });  
56.         },  
57.         RepeaterClear:function  (){//清除数据  
58.                 this.each(function(){  
59.                             if($(this).data("_ItemTemplate")==null  ){  
60.                                     $(this).data("_ItemTemplate",$(this).find(".itemtemplate").toHTML());  
61.                             }    
62.                             $(this).find(".itemtemplate").remove();  
63.                 });  
64.         },  
65.         RepeaterSetItemClass:function  (class1,class2,hoverClass){//行样式  
66.                 this.each(function(){  
67.                         if(class1==null  ||  class2==null  ||  hoverClass  ==null  )  
68.                                 return  ;  
69.                                 //将设置存入缓存  
70.                               $(this).data("_class1",class1);  
71.                               $(this).data("_class2",class2);  
72.                               $(this).data("_hoverClass",hoverClass);  
73.                               //  
74.                               if($(this).data("_DataSrc")!=null  ){  
75.                                         var  domtype=$(this).find(".itemtemplate").attr('nodeName');  
76.                                       //  
77.                                       $(this).find(domtype).addClass(class1);  
78.                                       $(this).find(domtype+":nth-child(even)").addClass(class2);  
79.                                     // $(this).find(domtype+":first").removeClass(class1);  
80.                                         //鼠标移动上去颜色变化  
81.                                       $(this).find(domtype).hover(function(){$(this).addClass(hoverClass);},function(){$(this).removeClass(hoverClass);});    
82.                       }  
83.               });  
84.         }        
85. });  
86. //查找字段公共方法.  
87. function  ____FindFiled(str){//公共方法.  
88.         var  myRegex  =  new  RegExp("\{.+?\}",  "gim");  
89.         //var arr = myRegex.exec(str);  
90.         var  arr=str.match(myRegex);  
91.         if(arr  ==null  )return  null  ;  
92.         var  count=arr.length;  
93.         for(  var  i=0;i<count;i++)  
94.         {  
95.               arr[i]=arr[i].Replace("{","").Replace("}","");  
96.         }  
97.         return  arr  ;  
98. }  
99. //---------------------------------------------------------------------- 

挺乱的，但代码也简单，也有注释，不多说了:-D

如何使用

1. $('repeater1').Repeager(data,[ItemCreatedCallBack]); 

ItemCreatedCallBack 为可选参数，可以说是项创建事件吧！

如何嵌套？

通过ItemCreatedCallBack回调（或称事件）
Demo - HTML模板:

1. <div  id="repeager1">    
2.     <div    class='itemtemplate'>    
3.                     <b>{列名}</b>    
4.                     <ul  class="subrepeager">    
5.                                     <!--每多一层嵌套  要  多一层大括号-->  
6.                                     <li  class='itemtemplate'>{{列名}}</li>    
7.                     </ul>    
8.     </div>    
9. </div>   

Demo - js代码:

1. $(function{    
2.                 $('repeater1').Repeager(data,itemCreate);        
3. });    
4. function    itemCreate(x){    
5.             // 在此绑定子repeater  
6.             // 参数X是父repeater的项引用类型为jQuery对象,  
7.             // 通过X取得子repeater要用的数据 并取数据源 在此绑定子repeater 绑定子repeater  
8. }