基于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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
vue环境搭建简单教程
Nov 07 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
Python微信库:itchat的用法详解
2017/08/14 Python
图解Python变量与赋值
2018/04/03 Python
python实现黑客字幕雨效果
2018/06/21 Python
python实现汉诺塔算法
2021/03/01 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python中如何添加自定义模块
2020/06/09 Python
销售主管的自我评价分享
2014/01/03 职场文书
中学生个人自我评价
2014/02/06 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
教师党员个人自我评价
2015/03/04 职场文书
关于倡议书的范文
2015/04/29 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
详解Redis基本命令与使用场景
2021/06/01 Redis