JQuery模板插件 jquery.tmpl 动态ajax扩展_jquery

在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板，或者数据，根据url参数或者其他信息加载不同的模板，数据。在我的某个项目中有这个需求，所以特地写成jquery工具函数，加入了本地数据和ajax数据加载模板，数据的方式。

参数说明：

Tmpl: function(template, data, fun)
1：template：
1）： url: 为ajax的加载url，ajax当且仅当remote= true时候加载。
2）：data: 为ajax加载参数
3） templateSelector: 为本地模板选择器，当且仅当remote= false时使用
4） remote: true为ajax，false为本地数据，
5） cache: 指示是否对模板缓存。
2：data：
1）： url: 为ajax的加载url，ajax当且仅当remote= true时候加载。
2）：data: 为ajax加载参数
3） templateData: 为本地数据，当且仅当remote= false时使用
4） remote: true为ajax，false为本地数据，
5） cache: 指示是否对模板缓存。
3：fun为回调函数：
fun(jquery.tmpl对象，模板script，数据);

具体代码如下：

复制代码 代码如下:

; (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 = $('

测试代码：
前台：

复制代码 代码如下:

ttp://www.w3.org/1999/xhtml%22>

id="test" width="500">

ID	姓名	性别	操作

---

测试缓存系统（url）

id="Table1" width="500">

ID	姓名	性别	操作