How to achieve a JS version of the repeater?
asp.net WebForm Repeater control is very useful, I would like to use JS to achieve a in AJAX applications also should be good! Six months ago made a jquery.repeater plug-in, and used in a project, now take to bask!
Principle
The item template is HTML code, the plug-in receives the JSON data source, reads the template, and innovates each item.
Template HTML
Copy Code code as follows:
<ul id= ' Repeater1 ' >
<li class= ' itemtempplate ' >{column name}</li>
</ul>
JSON data source format
It's a matter of the form of a master:-D. As follows:
{tablename: "table name", rows:[{"column 1": "Value 1"},{"column 2": "Value 2"} ... {' Column n ': ' Value n '}]}
Extending native String objects
To extend a string object for ease of use
Copy Code code as follows:
Extension 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;
}
To convert a JSON string to an object
Copy Code code as follows:
Converting JSON data to objects
function Jsonstringtodatatable (jsondata) {
try{
var table=eval ("(" +jsondata+ ")");
return table;
}
catch (ex) {
return null;
}
}
Take the page element itself HTML source code
Because some browsers (such as Firefox) do not support outerHTML, a tohtml widget is featured.
Copy Code code as follows:
Take your own HTML source plug-ins.
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;
}
}
});
Plug-in main code
Copy Code code as follows:
JQuery.fn.extend ({
Repeater:function (Val,itemcreatedcallback) {//set or get data source
This.each (function () {
if (Val==null | | val==undefined) {//If the parameter is NULL returns the corresponding data
return $ (this). Data ("_DATASRC");//back from cache
}
else{//If you do not set the data source for null.
//
try{
var valtype= (typeof Val). ToString ();
if (valtype== ' string ')
Val =jsonstringtodatatable (val). Rows;
}catch (ex) {
return;
}
//
var domtype=$ (this). Find (". ItemTemplate"). attr (' nodename '); Lookup 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);//Find all Columns
if (fileds==null) return false;
VAR filedscount=fileds.length;//computed column Count
////
$ (this). Data ("_datasrc", Val); Putting data into the cache
var count=val.length;
for (var I=0;i<count; i++) {
Bound column values
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 () {//Erase 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;
Storing settings in 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+ ": a"). Removeclass (Class1);
Mouse Move Up color change
$ (this). Find (Domtype). Hover (function () {$ (a). addclass (Hoverclass);},function () {$ (this). Removeclass ( Hoverclass);};
}
});
}
});
Lookup field public method.
function ____findfiled (str) {//public method.
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;
}
//----------------------------------------------------------------------
Very messy, but the code is also simple, there are comments, not much said:-D
How to use
Copy Code code as follows:
$ (' Repeater1 '). Repeager (Data,[itemcreatedcallback]);
Itemcreatedcallback is an optional parameter, it can be said to be an item creation event!
How do I nest?
Callback via Itemcreatedcallback (or event)
demo-html Template:
Copy Code code as follows:
<div id= "Repeager1" >
<div class= ' ItemTemplate ' >
<b>{Column Name}</b>
<ul class= "Subrepeager" >
<!--more than one layer of nested braces-->
<li class= ' ItemTemplate ' >{{column name}}</li>
</ul>
</div>
</div>
Demo-js Code:
Copy Code code as follows:
$ (function{
$ (' Repeater1 '). Repeager (data,itemcreate);
});
function Itemcreate (x) {
This binding child repeater
Parameter x is the parent repeater's item reference type as a jquery object,
Get the data from the child repeater using X and take the data source repeater the binding child repeater
}
SOURCE download
Author: Houfeng
Source: http://houfeng.cnblogs.com
