基于jquery的Repeater实现代码

　　<ul id='repeater1'>

　　<li class='itemtempplate'>{列名}</li>

　　</ul>

　　//扩展String

　　String.prototype.trim = function() {

　　return this.replace(/(^\s*)|(\s*$)/g,"");

　　}

　　//

　　String.prototype.Replace=function (str1,str2){

　　var rs=this.replace(new RegExp(str1,"gm"),str2);

　　return rs;

　　}

　　//将json数据转为对象

　　function jsonStringToDataTable(jsondata){

　　try{

　　var table=eval("("+jsondata+")");

　　return table;

　　}

　　catch(ex){

　　return null ;

　　}

　　}

　　//取自身HTML源码的插件.

　　jQuery.fn.extend({

　　toHTML:function(){

　　var obj=$(this[0]);

　　if(obj[0].outerHTML){

　　return obj[0].outerHTML;

　　}

　　else{

　　if($('.houfeng-hidearea')==null || $('.houfeng-hidearea')[0]==null ){

　　$('body').append("<div class='houfeng-hidearea' style='display:none;'></div>");

　　}

　　$('.houfeng-hidearea').css('display','none');

　　$('.houfeng-hidearea').html('');

　　obj.clone(true).prependTo('.houfeng-hidearea');

　　var rs= $('.houfeng-hidearea').html();

　　$('.houfeng-hidearea').html('');

　　return rs;

　　}

　　}

　　});

　　jQuery.fn.extend({

　　Repeater:function(val,ItemCreatedCallBack){//设置或取得数据源

　　this.each(function(){

　　if(val==null || val==undefined){//如果参数为空返回相应数据

　　return $(this).data("_DataSrc");//从缓存返回数据

　　}

　　else{//如果不为空设置数据源。

　　//

　　try{

　　var valtype=(typeof val).toString();

　　if(valtype=='string')

　　val =jsonStringToDataTable(val).rows;

　　}catch(ex){

　　return ;

　　}

　　//

　　var domtype=$(this).find(".itemtemplate").attr('nodeName');//查找元素类型

　　//

　　if($(this).data("_ItemTemplate")==null ){

　　$(this).data("_ItemTemplate",$(this).find(".itemtemplate").toHTML());

　　$(this).find(".itemtemplate").remove();

　　}

　　var TrContentTemplate=$(this).data("_ItemTemplate");

　　//

　　var fileds=____FindFiled(TrContentTemplate);//找到所有列

　　if(fileds==null )return false ;

　　var filedscount=fileds.length;//计算列数

　　////

　　$(this).data("_DataSrc",val); //将数据放入缓存

　　var count=val.length;

　　for(var i=0;i<count ;i++){

　　////绑定列值

　　var NewTrContent=TrContentTemplate;

　　//

　　NewTrContent=NewTrContent.Replace("{{","{#");

　　NewTrContent=NewTrContent.Replace("}}","#}");

　　for( var j=0;j<filedscount;j++){

　　NewTrContent=NewTrContent.Replace("{"+fileds[j]+"}",val[i][fileds[j].trim()]);

　　}

　　NewTrContent=NewTrContent.Replace("{#","{");

　　NewTrContent=NewTrContent.Replace("#}","}");

　　//

　　var area=$(this).find('tbody');

　　if(area ==null )

　　area =$(this);

　　//

　　area.append(NewTrContent);

　　if(ItemCreatedCallBack!=null ){

　　ItemCreatedCallBack($(this).find(domtype+":last"));

　　}

　　}

　　//

　　$(this).RepeaterSetItemClass($(this).data("_class1"),$(this).data("_class2"),$(this).data("_hoverClass"));

　　}

　　});

　　},

　　RepeaterClear:function (){//清除数据

　　this.each(function(){

　　if($(this).data("_ItemTemplate")==null ){

　　$(this).data("_ItemTemplate",$(this).find(".itemtemplate").toHTML());

　　}

　　$(this).find(".itemtemplate").remove();

　　});

　　},

　　RepeaterSetItemClass:function (class1,class2,hoverClass){//行样式

　　this.each(function(){

　　if(class1==null || class2==null || hoverClass ==null )

　　return ;

　　//将设置存入缓存

　　$(this).data("_class1",class1);

　　$(this).data("_class2",class2);

　　$(this).data("_hoverClass",hoverClass);

　　//

　　if($(this).data("_DataSrc")!=null ){

　　var domtype=$(this).find(".itemtemplate").attr('nodeName');

　　//

　　$(this).find(domtype).addClass(class1);

　　$(this).find(domtype+":nth-child(even)").addClass(class2);

　　// $(this).find(domtype+":first").removeClass(class1);

　　//鼠标移动上去颜色变化

　　$(this).find(domtype).hover(function(){$(this).addClass(hoverClass);},function(){$(this).removeClass(hoverClass);});

　　}

　　});

　　}

　　});

　　//查找字段公共方法.

　　function ____FindFiled(str){//公共方法.

　　var myRegex = new RegExp("\{.+?\}", "gim");

　　//var arr = myRegex.exec(str);

　　var arr=str.match(myRegex);

　　if(arr ==null )return null ;

　　var count=arr.length;

　　for( var i=0;i<count;i++)

　　{

　　arr[i]=arr[i].Replace("{","").Replace("}","");

　　}

　　return arr ;

　　}

　　//----------------------------------------------------------------------

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

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

　　<div id="repeager1">

　　<div class='itemtemplate'>

　　<b>{列名}</b>

　　<ul class="subrepeager">

　　<!--每多一层嵌套 要 多一层大括号-->

　　<li class='itemtemplate'>{{列名}}</li>

　　</ul>

　　</div>

　　</div>

　　$(function{

　　$('repeater1').Repeager(data,itemCreate);

　　});

　　function itemCreate(x){

　　// 在此绑定子repeater

　　// 参数X是父repeater的项引用类型为jQuery对象,

　　// 通过X取得子repeater要用的数据 并取数据源 在此绑定子repeater 绑定子repeater

　　}