Jquery-based Repeater implementation code _ jquery

This article explains how to use javascript to implement an asp.net Repeater control, called the jQuery. Repeater plug-in. Let's take a look. How to implement a js repeater?
The repeater control of Asp.net WebForm is quite useful. I want to use js to implement a repeater control in Ajax applications! I made a jQuery. Repeater plug-in six months ago and used it in a project. Now I am going to share it with you!
Principle
The item template is HTML code. The plug-in receives the json data source, reads the template, and innovates each item.
Template HTML

The Code is as follows:

• {Column name}

Json data source format
The format of the things is as follows:-D:
{Tablename: "table name", rows: [{"column 1": "value 1" },{ "column 2": "value 2 "}..... {"column n": "value n"}]}
Extended native String object
Extended String object for ease of use

The Code is as follows:

// Extended 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;
}

Convert a json string to an object

The Code is as follows:

// Convert json data into an object
Function jsonStringToDataTable (jsondata ){
Try {
Var table = eval ("(" + jsondata + ")");
Return table;
}
Catch (ex ){
Return null;
}
}

Obtain the HTML source code of the webpage Element
Because some browsers (such as firefox) do not support outerHTML, a small toHTML plug-in is provided.

The Code is as follows:

// Obtain the HTML source code plug-in.
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 ("

");
}
Certificate ('.houfeng-hidearea'developer.css ('display', 'None ');
('.Houfeng-hidearea'{.html ('');
Obj. clone (true). prependTo ('. houfeng-hideare ');
Var rs = ('.houfeng-hidearea'{.html ();
('.Houfeng-hidearea'{.html ('');
Return rs;
}
}
});

Main Code of the plug-in

The Code is as follows:

JQuery. fn. extend ({
Repeater: function (val, ItemCreatedCallBack) {// set or retrieve the data source
This. each (function (){
If (val = null | val = undefined) {// if the parameter is null, the corresponding data is returned.
Return $ (this). data ("_ DataSrc"); // return data from the cache
}
Else {// if not empty, set the data source.
//
Try {
Var valtype = (typeof val). toString ();
If (valtype = 'string ')
Val = jsonStringToDataTable (val). rows;
} Catch (ex ){
Return;
}
//
Var domtype = $ (this). find (". itemtemplate"). attr ('nodename'); // find the element type
//
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); // locate all columns
If (fileds = null) return false;
Var filedscount = fileds. length; // calculate the number of Columns
////
$ (This). data ("_ DataSrc", val); // cache the data.
Var count = val. length;
For (var I = 0; I /// Bind the column Value
Var NewTrContent = TrContentTemplate;
//
NewTrContent = NewTrContent. Replace ("{{","{#");
NewTrContent = NewTrContent. Replace ("}}","#}");
For (var j = 0; 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 () {// clear data
This. each (function (){
If ($ (this). data ("_ ItemTemplate") = null ){
$ (This). data ("_ ItemTemplate", $ (this). find (". itemtemplate"). toHTML ());
}
$ (This). find (". itemtemplate"). remove ();
});
},
RepeaterSetItemClass: function (class1, class2, hoverClass) {// row style
This. each (function (){
If (class1 = null | class2 = null | hoverClass = null)
Return;
// Save the settings to the cache
$ (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 );
// Move the mouse to change the color
$ (This ). find (domtype ). hover (function () {$ (this ). addClass (hoverClass) ;}, function () {$ (this ). removeClass (hoverClass );});
}
});
}
});
// Common method for searching fields.
Function ____ FindFiled (str) {// public method.
Var myRegex = new RegExp ("\ {. +? \} "," Gim ");
// Var arr = myRegex.exe c (str );
Var arr = str. match (myRegex );
If (arr = null) return null;
Var count = arr. length;
For (var I = 0; I {
Arr [I] = arr [I]. Replace ("{", ""). Replace ("}","");
}
Return arr;
}
//----------------------------------------------------------------------

It's messy, but the code is also simple and there are comments, not to mention:-D
How to Use

The Code is as follows:

$ ('Repeater1'). Repeager (data, [ItemCreatedCallBack]);
ItemCreatedCallBack is an optional parameter. It is an item creation event!

How to nest?
Callback (or event) through ItemCreatedCallBack)
Demo-HTML template:

The Code is as follows:

{Column name}

• {Column name }}

Demo-js code:

The Code is as follows:

$ (Function {
$ ('Repeater1'). Repeager (data, itemCreate );
});
Function itemCreate (x ){
// Bind the subrepeater here
// Parameter X indicates that the item reference type of the parent repeater is jQuery object,
// Use X to obtain the data used by the subrepeater and obtain the data source. Bind The subrepeater to the subrepeater.
}

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