jquery_jquery를 기반으로 한 반복기 구현 코드

< ;ul id='repeater1'>

{열 이름}

//확장 문자열
문자열 .prototype.trim = function() {
return this.replace(/(^s*)|(s*$)/g,"")
}
//
문자열. 프로토타입.Replace= 함수(str1,str2){
var rs=this.replace(new RegExp(str1,"gm"),str2)
return rs;
json 문자열을 객체로 변환합니다

var table=eval("(" jsondata ")")
return table; >catch(ex) {
return null ;
}
}


웹 요소 자체의 HTML 소스 코드 가져오기
일부 브라우저(예: Firefox) 외부 HTML을 지원하지 않으면 toHTML이 위젯으로 제공됩니다.

return obj[0 ].outerHTML;
}
else{
if($('.houfeng-hidearea')==null || $('.houfeng-hidearea')[0 ]==null ){
$('body').append(""); }
$(' .houfeng-hiderea').css('display','none')
$('.houfeng-hiderea').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==undefine){//매개변수가 비어 있으면 해당 데이터를 반환합니다
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 files=____FindFiled(TrContentTemplate);//모든 열 찾기
if(fileds==null ) return false
var filedscount=fileds.length;//열 수 계산
////
$(this).data("_DataSrc",val); //데이터를 캐시에 넣습니다.
var count=val .length;
for(var i=0;i////열 값 바인딩
var NewTrContent=TrContentTemplate
//
NewTrContent=NewTrContent .Replace("{{","{#");
NewTrContent=NewTrContent.Replace("}}","#}")
for( var j=0; jNewTrContent=NewTrContent.Replace("{" fileds[j] "}",val[i][fileds[j].trim()])
}
NewTrContent=NewTrContent.Replace( "{#","{");
NewTrContent=NewTrContent.Replace("#}","}")
//
vararea=$(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); .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);});
}
})
//Find 필드 공개 메소드 ____FindFiled( str){//공개 메서드.
var myRegex = new RegExp("{. ?}", "gim")
//var arr = myRegex.exec(str); str.match(myRegex); if(arr ==null )return null ;
var count=arr.length
for( var i=0;i
arr[i]= arr[i].Replace("{","").Replace("}","")
}
return arr
}
//------ ----------------------------- -------- -------------


꽤 난잡한데 코드도 간단하고 코멘트도 있어서 말은 안하겠습니다 more :-D
사용방법




코드 복사