JQuery模板插件 jquery.tmpl 動態(tài)ajax擴展
更新時間：2011年11月10日 23:27:13 作者：
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時我們需要去動態(tài)的ajax去加載模板，或者數(shù)據(jù)，根據(jù)url參數(shù)或者其他信息加載不同的模板，數(shù)據(jù)
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時我們需要去動態(tài)的ajax去加載模板，或者數(shù)據(jù)，根據(jù)url參數(shù)或者其他信息加載不同的模板，數(shù)據(jù)。在我的某個項目中有這個需求，所以特地寫成jquery工具函數(shù)，加入了本地數(shù)據(jù)和ajax數(shù)據(jù)加載模板，數(shù)據(jù)的方式。
參數(shù)說明：
Tmpl: function(template, data, fun)
1：template：
1）： url: 為ajax的加載url，ajax當(dāng)且僅當(dāng)remote= true時候加載。
2）：data: 為ajax加載參數(shù)
3） templateSelector: 為本地模板選擇器，當(dāng)且僅當(dāng)remote= false時使用
4） remote: true為ajax，false為本地數(shù)據(jù)，
5） cache: 指示是否對模板緩存。
2：data：
1）： url: 為ajax的加載url，ajax當(dāng)且僅當(dāng)remote= true時候加載。
2）：data: 為ajax加載參數(shù)
3） templateData: 為本地數(shù)據(jù)，當(dāng)且僅當(dāng)remote= false時使用
4） remote: true為ajax，false為本地數(shù)據(jù)，
5） cache: 指示是否對模板緩存。
3：fun為回調(diào)函數(shù)：
fun(jquery.tmpl對象，模板script，數(shù)據(jù));
具體代碼如下：
; (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);
測試代碼：
前臺：
<%@ 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>
<html xmlns="http://www.w3.org/1999/xhtml%22>
<head runat="server">
<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 < 19; i++) {
data.push(
{
Name: String.format("學(xué)生{0}", i),
Sex: i % 2 == 0 ? "男" : "女",
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>
</head>
<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="500">
<thead>
<tr style="text-align: center; font-size: larger; font-weight: bolder;">
<td>
ID
</td>
<td>
姓名
</td>
<td>
性別
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
<p>
測試緩存系統(tǒng)（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="500">
<thead>
<tr style="text-align: center; font-size: larger; font-weight: bolder;">
<td>
ID
</td>
<td>
姓名
</td>
<td>
性別
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
后臺ajax數(shù)據(jù)：
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"":""學(xué)生{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();
}
}
效果如上一篇：
參數(shù)說明：
Tmpl: function(template, data, fun)
1：template：
1）： url: 為ajax的加載url，ajax當(dāng)且僅當(dāng)remote= true時候加載。
2）：data: 為ajax加載參數(shù)
3） templateSelector: 為本地模板選擇器，當(dāng)且僅當(dāng)remote= false時使用
4） remote: true為ajax，false為本地數(shù)據(jù)，
5） cache: 指示是否對模板緩存。
2：data：
1）： url: 為ajax的加載url，ajax當(dāng)且僅當(dāng)remote= true時候加載。
2）：data: 為ajax加載參數(shù)
3） templateData: 為本地數(shù)據(jù)，當(dāng)且僅當(dāng)remote= false時使用
4） remote: true為ajax，false為本地數(shù)據(jù)，
5） cache: 指示是否對模板緩存。
3：fun為回調(diào)函數(shù)：
fun(jquery.tmpl對象，模板script，數(shù)據(jù));
具體代碼如下：
復(fù)制代碼 代碼如下:
; (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);
測試代碼：
前臺：
復(fù)制代碼 代碼如下:
<%@ 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>
<html xmlns="http://www.w3.org/1999/xhtml%22>
<head runat="server">
<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 < 19; i++) {
data.push(
{
Name: String.format("學(xué)生{0}", i),
Sex: i % 2 == 0 ? "男" : "女",
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>
</head>
<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="500">
<thead>
<tr style="text-align: center; font-size: larger; font-weight: bolder;">
<td>
ID
</td>
<td>
姓名
</td>
<td>
性別
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
<p>
測試緩存系統(tǒng)（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="500">
<thead>
<tr style="text-align: center; font-size: larger; font-weight: bolder;">
<td>
ID
</td>
<td>
姓名
</td>
<td>
性別
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
后臺ajax數(shù)據(jù)：
復(fù)制代碼 代碼如下:
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"":""學(xué)生{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();
}
}
效果如上一篇：
您可能感興趣的文章:
- jQuery插件擴展實例【添加回調(diào)函數(shù)】
- jQuery插件擴展extend的簡單實現(xiàn)原理
- jQuery插件擴展測試實例
- jQuery插件formValidator自定義函數(shù)擴展功能實例詳解
- jQuery插件kinMaxShow擴展效果用法實例
- jquery事件機制擴展插件 jquery鼠標(biāo)右鍵事件
- boxy基于jquery的彈出層對話框插件擴展應(yīng)用 彈出層選擇器
- jQuery下擴展插件和拓展函數(shù)的寫法（匿名函數(shù)使用的典型例子）
- jquery.boxy插件的iframe擴展代碼
- jQuery autocomplate 自擴展插件、自動完成示例代碼
- 利用jQuery插件擴展識別瀏覽器內(nèi)核與外殼的類型和版本的實現(xiàn)代碼
- jQuery插件擴展操作入門示例
相關(guān)文章
這篇文章主要介紹了基于Layer+jQuery的自定義彈框，功能強大，實用性強，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章通過實例代碼給大家講解了jquery替換節(jié)點元素的操作方法及動態(tài)頁面的實現(xiàn)代碼，非常不錯，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了jQuery團購倒計時特效實現(xiàn)方法,可實現(xiàn)相對固定時間的倒計時效果,非常具有實用價值,需要的朋友可以參考下2015-05-05
jquery倒計時插件分享,大家參考使用吧2013-12-12
這篇文章主要介紹了jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中的代碼，代碼簡單易懂，需要的朋友參考下2016-08-08
jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可以編輯的表格,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07
本文給大家介紹的是一款移動端下的jQuery插件Hammer.js，他是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標(biāo)事件支持各種手機事件，比如縮放，qq左滑動刪除，放大，旋轉(zhuǎn)等2015-07-07
這篇文章主要介紹了jQuery制作的超酷平面式時鐘效果，把日期和時間通過橫向刻度條展現(xiàn)，推薦給大家，有需要的小伙伴可以參考下2015-08-08
這篇文章主要介紹了jQuery基本選擇器之標(biāo)簽名選擇器的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jquery傳參及獲取方式,本文給大家兩種方式，通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02