JQuery模板外掛程式 jquery.tmpl 動態ajax擴充

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在上一篇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 = $('<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("學生{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>
測試緩衝系統（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資料：複製代碼代碼如下: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下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More