基于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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
php中的strpos使用示例
2014/02/27 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python实现log日志的示例代码
2018/04/28 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
2016年元旦致辞
2015/08/01 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers