jquery_jquery를 기반으로 한 반복기 구현 코드-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:23:03

원래의

1219명이 탐색했습니다.

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