Repeater implementation code based on jquery_jquery

How to implement a js version of repeater?
The repeater control of Asp.net WebForm is very easy to use. I think it would be good to use js to implement it in an Ajax application! I made a jQuery.Repeater plug-in half a year ago and used it in a project. Now I’m showing it off!
Principle
The item template is HTML code. The plug-in receives the json data source, reads the template and innovates each item.
Template HTML

Copy code The code is as follows:

< ;ul id='repeater1'>

{column name}

json data source format
You can decide the format of your own things:-D. As follows:
{tablename:"table name",rows:[{"column 1":"value 1"},{"Column 2":"Value 2"}....{"Column n":"Value n"}]}
Expand the native String object
Expand a String object for convenience

Copy code The code is as follows:

//Extended 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;
}

will Convert json string to object

Copy code The code is as follows:

//Convert json data For objects
function jsonStringToDataTable(jsondata){
try{
var table=eval("(" jsondata ")");
return table;
}
catch(ex) {
return null ;
}
}

Get the HTML source code of the web element itself
Since some browsers (such as firefox) do not support outerHTML, a toHTML is featured Widget.

Copy code The code is as follows:

//Plug-in that takes its own HTML source code.
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;
}
}
});

Plug-in main code

Copy codeThe code is as follows:

jQuery.fn.extend({
Repeater:function(val,ItemCreatedCallBack){//Set or get the data source
this.each(function(){
if(val= =null || val==undefined){//If the parameter is empty, return the corresponding data
return $(this).data("_DataSrc");//Return data from the cache
}
else{ //If not empty, set the data source.
//
try{
var valtype=(typeof val).toString();
if(valtype=='string')
val =jsonStringToDataTable(val).rows;
}catch(ex){
return ;
}
//
var domtype=$(this).find(".itemtemplate") .attr('nodeName'); //Find element type
//
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);//Find all columns
if(fileds==null ) return false ;
var filedscount=fileds.length;//Calculate the number of columns
////
$(this).data("_DataSrc",val); //Put data into cache
var count=val .length;
for(var i=0;i////Bind column value
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("#}","}");
//
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 ( ){//Clear data
this.each(function(){
if($(this).data("_ItemTemplate")==null ){
$(this).data("_ItemTemplate ",$(this).find(".itemtemplate").toHTML());
}
$(this).find(".itemtemplate").remove();
});
},
RepeaterSetItemClass:function (class1,class2,hoverClass){//Line style
this.each(function(){
if(class1==null || class2==null | | hoverClass ==null )
return ;
//Save settings into cache
$(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);
//The color changes when the mouse moves up
$(this).find(domtype).hover(function(){$(this).addClass(hoverClass);},function(){$(this).removeClass( hoverClass);});
}
});
}
});
//Find field public method.
function ____FindFiled(str){//Public method.
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{
arr[i]= arr[i].Replace("{","").Replace("}","");
}
return arr ;
}
//------ -------------------------------------------------- -------------

It’s quite messy, but the code is simple and there are comments, so I won’t say more :-D
How to use

Copy code The code is as follows:

$('repeater1').Repeager(data,[ItemCreatedCallBack]) ;
ItemCreatedCallBack is an optional parameter, it can be said to be an item creation event!

How to nest?
Callback (or event) via ItemCreatedCallBack
Demo - HTML template:

Copy code The code is as follows:

{column name}
< ;ul class="subrepeager">

{{Column name }}

Demo - js code:

Copy code The code is as follows:

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

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