基于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 09 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
javascript实现简易数码时钟
Mar 30 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python九九乘法表的实例
2017/09/26 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
电子商务专业毕业生自荐书
2014/06/22 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
社区综治工作汇报
2014/10/27 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
校长师德表现自我评价
2015/03/05 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
晚会开场白和结束语
2015/05/29 职场文书
法律意见书范本
2015/06/04 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android