基于jquery的Repeater实现代码


Posted in Javascript onJuly 17, 2010

如何实现一个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; 
for(var i=0;i<count ;i++){ 
////绑定列值 
var NewTrContent=TrContentTemplate; 
// 
NewTrContent=NewTrContent.Replace("{{","{#"); 
NewTrContent=NewTrContent.Replace("}}","#}"); 
for( var j=0;j<filedscount;j++){ 
NewTrContent=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<count;i++) 
{ 
arr[i]=arr[i].Replace("{","").Replace("}",""); 
} 
return arr ; 
} 
//----------------------------------------------------------------------

挺乱的,但代码也简单,也有注释,不多说了:-D
如何使用
$('repeater1').Repeager(data,[ItemCreatedCallBack]); 
ItemCreatedCallBack 为可选参数,可以说是项创建事件吧!

如何嵌套?
通过ItemCreatedCallBack回调(或称事件)
Demo - HTML模板:
<div id="repeager1"> 
<div class='itemtemplate'> 
<b>{列名}</b> 
<ul class="subrepeager"> 
<!--每多一层嵌套 要 多一层大括号--> 
<li class='itemtemplate'>{{列名}}</li> 
</ul> 
</div> 
</div>

Demo - js代码:
$(function{ 
$('repeater1').Repeager(data,itemCreate); 
}); 
function itemCreate(x){ 
// 在此绑定子repeater 
// 参数X是父repeater的项引用类型为jQuery对象, 
// 通过X取得子repeater要用的数据 并取数据源 在此绑定子repeater 绑定子repeater 
}

源码下载
作者:houfeng
出处:http://houfeng.cnblogs.com
Javascript 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
javascript onmouseout 解决办法
Jul 17 #Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 #Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 #Javascript
JQUERY获取form表单值的代码
Jul 17 #Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
js css自定义分页效果
2017/02/24 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
英语自荐信常用语句
2013/12/13 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
工作作风承诺书
2014/08/30 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
离婚协议书范文2016
2016/03/18 职场文书
java多态注意项小结
2021/10/16 Java/Android
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技