基于jquery的Repeater实现代码
2024-05-06 14:28:13
供稿：网友
如何实现一个js版的repeater?
Asp.net WebForm的repeater控件挺好用，我想用js实现一个在Ajax应用中也该还不错！半年前做了一个jQuery.Repeater插件，并用在了一个项目中，如今拿来晒晒！
原理
项模板为HTML代码，插件接收json数据源，读取模板并创新每一项。
模板HTML
代码如下:
<ul id='repeater1'>
<li class='itemtempplate'>{列名}</li>
</ul>
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("<div class='houfeng-hidearea' style='display:none;'></div>");
}
$('.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;
