如何实现一个js版的repeater?
asp.net webform的repeater控件挺好用，我想用js实现一个在ajax应用中也该还不错！半年前做了一个jquery.repeater插件，并用在了一个项目中，如今拿来晒晒！
原理
项模板为html代码，插件接收json数据源，读取模板并创新每一项。
模板html
复制代码 代码如下:
{列名}
json数据源格式
自个捣鼓的东西格式就自个做主啦:-d . 如下：
{tablename:表名,rows:[{列1:值1},{列2:值2}.....{列n:值n}]}
扩展原生string对象
为方便使用扩展一个string对象
复制代码 代码如下:
//扩展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字符串转为对象
复制代码 代码如下:
//将json数据转为对象
function jsonstringtodatatable(jsondata){
try{
var table=eval((+jsondata+));
return table;
}
catch(ex){
return null ;
}
}
取网页元素自身html源码
由于有些浏览器(如firefox)不支持outerhtml,特写了一个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-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////绑定列值
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 (){//清除数据
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{
arr[i]=arr[i].replace({,).replace(},);
}
return arr ;
}
//----------------------------------------------------------------------
挺乱的，但代码也简单，也有注释，不多说了:-d
如何使用
复制代码 代码如下:
$('repeater1').repeager(data,[itemcreatedcallback]);
itemcreatedcallback 为可选参数，可以说是项创建事件吧！
如何嵌套？
通过itemcreatedcallback回调（或称事件）
demo - html模板:
复制代码 代码如下:
{列名}
{{列名}}
demo - js代码:
复制代码 代码如下:
$(function{
$('repeater1').repeager(data,itemcreate);
});
function itemcreate(x){
// 在此绑定子repeater
// 参数x是父repeater的项引用类型为jquery对象,
// 通过x取得子repeater要用的数据 并取数据源 在此绑定子repeater 绑定子repeater
}
源码下载
作者：houfeng
出处：http://houfeng.cnblogs.com