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

JS 버전의 리피터를 구현하는 방법은 무엇인가요?
Asp.net WebForm의 리피터 제어는 사용하기 매우 쉽습니다. Ajax 애플리케이션에서 구현하려면 js를 사용하는 것이 좋을 것 같습니다! 반년 전에 jQuery.Repeater 플러그인을 만들어 프로젝트에 사용했습니다.
원리
항목 템플릿은 HTML 코드입니다. 플러그인은 json 데이터 소스를 수신하고 템플릿을 읽고 각 항목을 혁신합니다.
템플릿 HTML

코드 복사 코드는 다음과 같습니다.

< ;ul id='repeater1'>

{열 이름}

json 데이터 소스 형식 자신만의 형식을 결정할 수 있습니다:-D. 다음과 같이:
{tablename:"table name",rows:[{"column 1": "value 1"},{"Column 2":"Value 2"}....{"Column n":"Value n"}]}
기본 문자열 개체 확장
다음에 대한 문자열 개체 확장 편의

코드 복사 코드는 다음과 같습니다.

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

코드 복사

코드는 다음과 같습니다. //json 데이터 변환 function jsonStringToDataTable(jsondata){

try{

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


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

코드 복사

코드는 다음과 같습니다. //자체 가져가는 플러그인 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("

"); }
$(' .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
사용방법




코드 복사

코드는 다음과 같습니다.

$('repeater1').Repeager(data,[ItemCreatedCallBack]) ; ItemCreatedCallBack은 선택적 매개변수로, 아이템 생성 이벤트라고 할 수 있습니다! 네스팅 방법은? ItemCreatedCallBack을 통한 콜백(또는 이벤트)

데모 - HTML 템플릿:

코드 복사


코드는 다음과 같습니다.

{열 이름} >< ;ul class="subrepeager">

{열 이름 }}

데모 - js 코드:




코드 복사


코드는 다음과 같습니다.

$(function{
$('repeater1').Repeager(data,itemCreate);
})
function itemCreate(x){
// 여기에 바인딩 리피터
//매개변수 🎜>}

소스 코드 다운로드
작성자: houfeng 출처: http://houfeng.cnblogs.com