This plugin was introduced in the previous jquery template plugin-jquery.tmpl. Sometimes we need to go to dynamic Ajax to load templates, or data, depending on URL parameters or other information to load different templates, data. There was this requirement in one of my projects, so I specifically wrote the jquery tool function, adding local data and Ajax data-loading templates, the data in the way.
Parameter description:
Tmpl:function (template, data, fun)
1:template:
1): URL: Load Url,ajax for Ajax if and only when remote= true.
2): Data: Load parameters for Ajax
3) Templateselector: For the local template selector, when and only if remote= false
4) Remote:true for Ajax,false as local data,
5 cache: Indicates whether the template is cached.
2:data:
1): URL: Load Url,ajax for Ajax if and only when remote= true.
2): Data: Load parameters for Ajax
3) TemplateData: Local data, used when and only if remote= false
4) Remote:true for Ajax,false as local data,
5 cache: Indicates whether the template is cached.
3:fun is a callback function:
Fun (Jquery.tmpl object, template script, data);
The specific code is as follows:
Copy Code code as follows:
; (function ($) {
$.extend ({
Tmpl_data:function (TE, Data, fun, Templatecache) {
data = Jquery.extend ({data: "", url: "", TemplateData: {}, Remote:true, cache:true}, data);
if (!data.remote) {
Fun (Te.tmpl (data.templatedata), TE, data.templatedata);
if (!templatecache) {
Te.remove ();
}
Return
}
var da = te.data ("Objdata");
if (Data.cache && da!= null && da!= undefined) {
Fun (Te.tmpl (DA), TE, DA);
if (!templatecache) {
Te.remove ();
}
Return
}
$.ajax ({
Type: "Get",
Data:data.data,
Url:data.url,
DataType: "JSON",
Cache:false,
Context: {template:te, data:data},
Success:function (Tmpldata) {
Fun (This.template.tmpl (tmpldata), this.template, Tmpldata);
if (Data.cache) {
This.template.data ("Objdata", tmpldata);
}
if (!templatecache) {
This.template.remove ();
}
},
Error:function (e) {
Throw "Get Data error (" + This.data.url + "?" + This.data.data + "):" + E;
}
});
},
Jqueryselecotrcharchange:function (str) {
Return Str.replace (".", "\ \."). Replace ("#", "\\#");
},
Tmpl:function (template, data, fun) {
Template = Jquery.extend ({data: "", url: "", Templateselector: "", Remote:true, cache:true}, template);
if (!template.remote) {
$. Tmpl_data ($ (template.templateselector), Data, fun, true);
Return
}
var te = null;
try {
Te = $ ("script:[url= '" + $.) Jqueryselecotrcharchange (Template.url + "?" + template.data) + "'")
}
catch (e) {
}
if (template.cache && te!= null && te.length > 0) {
$. Tmpl_data (TE, Data, fun, Template.cache);
Return
}
$.ajax ({
Type: "Get",
Data:template.data,
Url:template.url,
DataType: "HTML",
Cache:false,
Context: {template:template, data:data},
Error:function (e) {
Throw "Get template error (" + This.template.url + "?" + This.template.data + "):" + E;
},
Success:function (tmpltemplate) {
var te = $ (' <script type= "Text/x-jquery-tmpl" > ' + tmpltemplate + ' <\/script> '). Appendto (Document.body);
Te.attr ("url", (This.template.url + "?" + This.template.data));
$. Tmpl_data (TE, This.data, fun, This.template.cache);
}
});
}
});
}) (JQuery);
Test code:
Front desk:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Tmpl3.aspx.cs" inherits= "Tmpl3"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd %22>
<title></title>
<script src= "Script/jquery-1.6.4.js" type= "Text/javascript" ></script>
<script src= "Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" src= "Script/remote-tmpl.js" ></script>
<script type= "Text/javascript" >
; String.Format = function () {
var s = arguments[0];
for (var i = 0; i < arguments.length-1; i++) {
var reg = new RegExp ("\\{" + i + "\}", "GM");
s = S.replace (Reg, arguments[i + 1]);
}
return s;
};
function Ajaxdeleteinvoke (ID) {
Alert (String.Format ("ajaxdeleteinvoke:id={0}", id));
}
$ (function () {
$. Tmpl ({url: "tmpltemplate.htm", Data: "Test=1"}, {url: "tmpl3.aspx", Data: "Ajax=1"}, Function (t, TE, DA) {
T.appendto ("#test >tbody");
$ ("#test >tbody table"). Hide ();
$ ("#test. Detailsimg"). Live ("Click", Function () {
var state = $ (this). Data ("state");
var $tr = $ (this). Parent (). parent ();
if (state = = "O") {
$ ("table", $tr. Next ()). Hide ();
$ (this). Data ("state", "C");
$ (this). attr ("src", "image/folder_o.png");
} else {
$ ("table", $tr. Next ()). Show ();
$ (this). Data ("state", "O");
$ (this). attr ("src", "image/folder_c.png");
}
});
});
$ ("#btntest"). Bind ("click", Function () {
// $. Tmpl ({url: "tmpltemplate.htm", Data: "Test=1"}, {url: "tmpl3.aspx", Data: "Ajax=1"}, Function (t, TE, DA) {
T.appendto ("#Table1 >tbody");
$ ("#Table1 >tbody table"). Hide ();
$ ("#Table1. Detailsimg"). Live ("Click", Function () {
var state = $ (this). Data ("state");
var $tr = $ (this). Parent (). parent ();
if (state = = "O") {
$ ("table", $tr. Next ()). Hide ();
$ (this). Data ("state", "C");
$ (this). attr ("src", "image/folder_o.png");
} else {
$ ("table", $tr. Next ()). Show ();
$ (this). Data ("state", "O");
$ (this). attr ("src", "image/folder_c.png");
// }
// });
// });
// });
var data = new Array ();
for (var i = 0; i < i++) {
Data.push (
{
Name:String.format ("Student {0}", i),
Sex:i% 2 = 0? "Male": "Female",
ID:I,
Class:
[
{
ClassName:String.format ("class{0}", i),
Count: (i + 10)/2
},
{
ClassName:String.format ("class2{0}", i),
Count: (i + 20)/2
}
]
});
}
$ ("#btntest"). Bind ("click", Function () {
$. Tmpl ({url: "tmpltemplate.htm", Data: "Test=1"}, {Remote:false,templatedata:data}, function (t, TE, DA) {
T.appendto ("#Table1 >tbody");
$ ("#Table1 >tbody table"). Hide ();
$ ("#Table1. Detailsimg"). Live ("Click", Function () {
var state = $ (this). Data ("state");
var $tr = $ (this). Parent (). parent ();
if (state = = "O") {
$ ("table", $tr. Next ()). Hide ();
$ (this). Data ("state", "C");
$ (this). attr ("src", "image/folder_o.png");
} else {
$ ("table", $tr. Next ()). Show ();
$ (this). Data ("state", "O");
$ (this). attr ("src", "image/folder_c.png");
}
});
});
});
})
</script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Div1" >
<table style= "MARGIN-TOP:10; margin-left:300px "border=" 1 "cellpadding=" 0 "cellspacing=" 0 "
id= "test" width= ">"
<thead>
<tr style= "Text-align:center; Font-size:larger; Font-weight:bolder; " >
<td>
Id
</td>
<td>
Name
</td>
<td>
Gender
</td>
<td>
Operation
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>
Test caching System (URL) </p>
<input type= "button" id= "btntest" value= "Testcache"/>
<table style= "MARGIN-TOP:10; margin-left:300px "border=" 1 "cellpadding=" 0 "cellspacing=" 0 "
Id= "Table1" width= ">"
<thead>
<tr style= "Text-align:center; Font-size:larger; Font-weight:bolder; " >
<td>
Id
</td>
<td>
Name
</td>
<td>
Gender
</td>
<td>
Operation
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
Background Ajax Data:
Copy Code code as follows:
protected void Page_Load (object sender, EventArgs e)
{
if (request["ajax"] = = "1")
{
Response.Clear ();
Response.ContentType = "Application/json";
System.Text.StringBuilder sb = new System.Text.StringBuilder ("[");
for (int i = 0; i < i++)
{
Sb. AppendFormat (@ "{{
"' Name ': ' Student {0} '",
"" Sex "": "" {1} "",
"" ID ": {0},
"" Class ":
[
{{
"" ClassName "": "" class{0} "",
' Count ': {2}
}},
{{
"" ClassName "": "" class2{0} "",
' Count ': {3}
}}
]
}, ", I, i% 2 = 0?" "Male": "Female", (i +)/2, (i + 20)/2);
}
Sb. Remove (sb.) Length-1, 1);
Sb. Append ("]");
Response.Write (sb.) ToString ());
Response.Flush ();
Response.close ();
Response.End ();
}
}
Effect as Previous:
Demo download
