基于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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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类中Static方法效率测试代码
2010/10/17 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
师范学院教师自荐书
2014/01/31 职场文书
通知的写法
2015/04/23 职场文书
公司开业主持词
2015/07/02 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android