JQuery template plug-in jquery.tmpl dynamic ajax extension_jquery

This plug-in was introduced in the previous article JQuery template plug-in-jquery.tmpl. Sometimes we need to use dynamic ajax to load templates or data, and load different templates and data based on url parameters or other information. I have this requirement in one of my projects, so I specially wrote it as a jquery tool function, and added local data and ajax data loading templates and data methods.

Parameter description:

Tmpl: function(template, data, fun)
1: template:
1): url: is the loading url of ajax, ajax only if and only Loaded when remote=true.
2): data: load parameters for ajax
3) templateSelector: is a local template selector, used when and only if remote= false
4) remote: true is ajax, false is local data,
5) cache: Indicates whether to cache the template.
2: data:
1): url: is the loading url for ajax, ajax is loaded when and only if remote= true.
2): data: Load parameters for ajax
3) templateData: is local data, used when and only if remote= false
4) remote: true is ajax, false is local data,
5) cache: Indicates whether to cache the template.
3: fun is the callback function:
fun(jquery.tmpl object, template script, data);

The specific code is as follows:

Copy code The code is 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 = $(' ').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 The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>

id="test" width="500">

ID	姓名	性别	操作

---

测试缓存系统（url）

id="Table1" width="500">

ID	姓名	性别	操作

后台ajax数据：

复制代码 代码如下:

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 < 20; i )
{
sb.AppendFormat(@" {{
""Name"":""学生{0}"",
""Sex"":""{1}"",
""ID"": {0},
""Class"":
[
{{
""ClassName"":""Class{0}"",
""Count"": {2}
}},
{{
""ClassName"":""Class2{0}"",
"" Count"": {3}
}}
]
}},", i, i % 2 == 0 ? "男" : "女", (i 10) / 2, (i 20) / 2);
}
sb.Remove(sb.Length - 1, 1);
sb.Append("]");
Response.Write(sb.ToString());
Response.Flush();
Response.Close();
Response.End();
}
}

效果如上一篇：

demo下载