參數說明： 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： 3） templatedata: 為本地資料，當且僅當remote= false時使用 3：fun為回調函數： fun(jquery.tmpl對象，模闆script，資料); 具體代碼如下：
JQuery模闆插件jquery.tmpl-動态ajax擴充 ; (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); $.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); 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); data: template.data, url: template.url, datatype: "html", context: { template: template, data: data }, 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);JQuery模闆插件jquery.tmpl-動态ajax擴充 測試代碼： 前台：JQuery模闆插件jquery.tmpl-動态ajax擴充 JQuery模闆插件jquery.tmpl-動态ajax擴充 <%@ 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> 姓名 性别 操作 </tr> </thead> <tbody> </tbody> </table> <hr /> <p> 測試緩存系統（url）</p> <input type="button" id="btntest" value="testcache" /> id="table1" width="500"> </div> </form> </body> </html>JQuery模闆插件jquery.tmpl-動态ajax擴充 背景ajax資料：JQuery模闆插件jquery.tmpl-動态ajax擴充 JQuery模闆插件jquery.tmpl-動态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(); } }JQuery模闆插件jquery.tmpl-動态ajax擴充 效果如上一篇：JQuery模闆插件jquery.tmpl-動态ajax擴充 JQuery模闆插件jquery.tmpl-動态ajax擴充
<a href="http://files.cnblogs.com/whitewolf/demo.rar">demo下載下傳</a>
其他資料：我jquery系列之目錄彙總