DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery模板插件 jquery.tmpl 動態ajax擴展
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 = $('<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下載
JQuery特效代碼
jquery一句話全選/取消全選
1、當然要引入jquery文件啦。 2、建立函數 var check_all = function(
jQuery EasyUI中對表格進行編輯的實現代碼
效果圖: 代碼如下: <!DOCTYPE html PUBLIC -//W3C//DTD HT
jQuery 錨點跳轉滾動條平滑滾動一句話代碼
jQuery錨點跳轉滾動條平滑滾動一句話代碼 代碼如下:$(html,body).animate(

相關文章

jQuery基礎知識JQuery入門技巧JQuery特效代碼JQuery常見問題
小編推薦
jquery實現右鍵菜單插件 jquery實現帶二級菜單的導航示例 js+jquery實現圖片裁剪功能 不要使用jQuery觸發原生事件的方法 精通Javascript+jQuery 視頻教程 在線觀看 Jquery樹插件zTree用法入門教程 24款熱門實用的jQuery插件推薦 JQuery AJAX提交中文亂碼的解決方案 jQuery切換網頁皮膚並保存到Cookie示例代碼 Jquery getJSON方法詳細分析
熱門推薦
jQuery中delegate與on的用法與區別示例介紹 jQuery中的.bind()、.live()和.delegate()之間區別分析 jquery提取元素裡的純文本不包含span等裡的內容 自動設置iframe大小的jQuery代碼 jQuery學習筆記之Helloworld jQuery指定DIV滾動到出現時執行代碼 Jquery中find與each方法用法實例教程 Jquery封裝tab自動切換效果的具體實現 jQuery Masonry瀑布流插件使用詳解
大家都在看
D語言中的混入（Mixin） XML 和Java – 是敵還是友？ XML“走進”數據庫 - asp.net Jquery api 速查表分享 JavaScript中數組的排序、亂序和搜索實現代碼 javascript實現表格排序 編輯 拖拽 縮放 js獲取json元素數量的方法 基於jquery的設置頁面文本框 只能輸入數字的實現代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved