jquery_jquery に基づくリピーター実装コード

js バージョンのリピーターを実装するには?
Asp.net WebForm のリピーター コントロールは、js を使用して Ajax アプリケーションに実装すると良いと思います。半年前に jQuery.Repeater プラグインを作成し、プロジェクトで使用しました。
原則
アイテム テンプレートは HTML コードです。プラグインは JSON データ ソースを受け取り、テンプレートを読み取り、各アイテムを更新します。
テンプレート HTML

コードをコピー コードは次のとおりです:

• {列名}

json データ ソース形式 次のように、独自の形式を決定できます:-D:
{tablename:"テーブル名",rows:[{"column 1": "value 1"},{"Column 2":"Value 2"}....{"Column n":"Value n"}]}
ネイティブ String オブジェクトを展開します
次の String オブジェクトを展開します

コードをコピー コードは次のとおりです:

//拡張文字列
文字列.prototype.trim = function() {
return this.replace(/(^s*)|(s*$)/g,"");
}
//
文字列。プロトタイプ.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 ;
}
}


Web 要素自体の HTML ソース コードを取得します
一部のブラウザ (Firefox など) externalHTML はサポートされていません。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("

");
$(' .houfeng-hiderea').css('display','none');
$('.houfeng-hiderea').html(''); (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==unknown){//パラメータが空の場合は、対応するデータを返します
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=filds.length;//列数を計算します
////
$(this).data("_DataSrc",val); //データをキャッシュに入れます
var count=val .length;
for(var i=0;i////バインド列値
var NewTrContent=TrContentTemplate;
NewTrContent=NewTrContent .Replace("{{","{#");
NewTrContent=NewTrContent.Replace("}}","#}"); jNewTrContent=NewTrContent.Replace("{" fileds[j] "}",val[i][filds[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); .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);});
}
});
//検索フィールド public メソッド ____FindFiled( str){//パブリック メソッド。
var myRegex = new RegExp("{. ?}", "gim");
//var arr = myRegex.exec(str); str.match(myRegex);
if(arr ==null )return null ;
var count=arr.length;
for( var i=0;iarr[i]= arr[i].Replace("{","").Replace("}","");
return
}
//------ -------------------------------------- -------- -------------


かなりごちゃごちゃしていますが、コードは簡単でコメントもあるので言いません詳細 :-D
使い方




コードをコピー


コードは次のとおりです:


$('repeater1').Repeager(data,[ItemCreatedCallBack]) ;

ItemCreatedCallBack はオプションのパラメーターであり、アイテム作成イベントと言えます。


ネストする方法は?

ItemCreatedCallBack によるコールバック (またはイベント) デモ - HTML テンプレート: コードをコピー

コードは次のとおりです。

{列名} >

• {列名 }}
デモ - js コード: >

コードをコピー

コードは次のとおりです:

$(function{
$('repeater1').Repeager(data,itemCreate);
});
function itemCreate(x){
// Bind here Stator repeater
//The parameter 🎜>}

Source code download
Author: houfeng Source: http://houfeng.cnblogs.com