|
|
ASP.NET WebForm的repeater控件挺好用，我想用js實(shí)現(xiàn)一個(gè)在Ajax應(yīng)用中也該還不錯(cuò)！半年前做了一個(gè)jQuery.Repeater插件，并用在了一個(gè)項(xiàng)目中，如今拿來(lái)曬曬！
原理
項(xiàng)模板為HTML代碼，插件接收json數(shù)據(jù)源，讀取模板并創(chuàng)新每一項(xiàng)。
模板HTML
復(fù)制代碼 代碼如下:
<ul id='repeater1'>
<li class='itemtempplate'>{列名}</li>
</ul>
json數(shù)據(jù)源格式
自個(gè)搗鼓的東西格式就自個(gè)做主啦:-D . 如下：
{tablename:"表名",rows:[{"列1":"值1"},{"列2":"值2"}.....{"列n":"值n"}]}
擴(kuò)展原生String對(duì)象
為方便使用擴(kuò)展一個(gè)String對(duì)象
復(fù)制代碼 代碼如下:
//擴(kuò)展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字符串轉(zhuǎn)為對(duì)象
復(fù)制代碼 代碼如下:
//將json數(shù)據(jù)轉(zhuǎn)為對(duì)象
function jsonStringToDataTable(jsondata){
try{
var table=eval("("+jsondata+")");
return table;
}
catch(ex){
return null ;
}
}
取網(wǎng)頁(yè)元素自身HTML源碼
由于有些瀏覽器(如firefox)不支持outerHTML,特寫(xiě)了一個(gè)toHTML的小插件。
復(fù)制代碼 代碼如下:
//取自身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;
}
}
});
插件主要代碼
復(fù)制代碼 代碼如下:
jQuery.fn.extend({
Repeater:function(val,ItemCreatedCallBack){//設(shè)置或取得數(shù)據(jù)源
this.each(function(){
if(val==null || val==undefined){//如果參數(shù)為空返回相應(yīng)數(shù)據(jù)
return $(this).data("_DataSrc");//從緩存返回?cái)?shù)據(jù)
}
else{//如果不為空設(shè)置數(shù)據(jù)源。
//
try{
var valtype=(typeof val).toString();
if(valtype=='string')
val =jsonStringToDataTable(val).rows;
}catch(ex){
return ;
}
//
var domtype=$(this).find(".itemtemplate").attr('nodeName');//查找元素類(lèi)型
//
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;//計(jì)算列數(shù)
////
$(this).data("_DataSrc",val); //將數(shù)據(jù)放入緩存
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 (){//清除數(shù)據(jù)
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 ;
//將設(shè)置存入緩存
$(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);
//鼠標(biāo)移動(dòng)上去顏色變化
$(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 ;
}
//----------------------------------------------------------------------
挺亂的，但代碼也簡(jiǎn)單，也有注釋?zhuān)欢嗾f(shuō)了:-D
如何使用
復(fù)制代碼 代碼如下:
$('repeater1').Repeager(data,[ItemCreatedCallBack]);
ItemCreatedCallBack 為可選參數(shù)，可以說(shuō)是項(xiàng)創(chuàng)建事件吧！
如何嵌套？
通過(guò)ItemCreatedCallBack回調(diào)（或稱(chēng)事件）
Demo - HTML模板:
復(fù)制代碼 代碼如下:
<div id="repeager1">
<div class='itemtemplate'>
<b>{列名}</b>
<ul class="subrepeager">
<!--每多一層嵌套 要 多一層大括號(hào)-->
<li class='itemtemplate'>{{列名}}</li>
</ul>
</div>
</div>
Demo - js代碼:
復(fù)制代碼 代碼如下:
$(function{
$('repeater1').Repeager(data,itemCreate);
});
function itemCreate(x){
// 在此綁定子repeater
// 參數(shù)X是父repeater的項(xiàng)引用類(lèi)型為jQuery對(duì)象,
// 通過(guò)X取得子repeater要用的數(shù)據(jù) 并取數(shù)據(jù)源 在此綁定子repeater 綁定子repeater
}
源碼下載
作者：houfeng
出處：http://houfeng.cnblogs.com
JavaScript技術(shù)：基于jquery的Repeater實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
