在上一篇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，数据);

具体代码如下：

  1. View Code
  3. ; (function($) {
  4. $.extend({
  5. Tmpl_Data: function(te, data, fun, templatecache) {
  6. data = jQuery.extend({ data: "", url: "", templateData: {}, remote: true, cache: true }, data);
  7. if (!data.remote) {
  8. fun(te.tmpl(data.templateData), te, data.templateData);
  9. if (!templatecache) {
  10. te.remove();
  11. }
  12. return;
  13. }
  14. var da = te.data("objdata");
  15. if (data.cache && da != null && da != undefined) {
  16. fun(te.tmpl(da), te, da);
  17. if (!templatecache) {
  18. te.remove();
  19. }
  20. return;
  21. }
  23. $.ajax({
  24. type: "GET",
  25. data: data.data,
  26. url: data.url,
  27. dataType: "json",
  28. cache: false,
  29. context: { template: te, data: data },
  30. success: function(tmpldata) {
  31. fun(this.template.tmpl(tmpldata), this.template, tmpldata);
  32. if (data.cache) {
  33. this.template.data("objdata", tmpldata);
  34. }
  36. if (!templatecache) {
  37. this.template.remove();
  38. }
  39. },
  40. error: function(e) {
  41. throw "get data error(" + this.data.url + "?" + this.data.data + "):" + e;
  42. }
  43. });
  45. },
  47. JquerySelecotrCharChange: function(str) {
  48. return str.replace(".", "\\.").replace("#", "\\#");
  49. },
  51. Tmpl: function(template, data, fun) {
  52. template = jQuery.extend({ data: "", url: "", templateSelector: "", remote: true, cache: true }, template);
  54. if (!template.remote) {
  55. $.Tmpl_Data($(template.templateSelector), data, fun, true);
  56. return;
  57. }
  58. var te = null;
  59. try {
  60. te = $("script:[url='" + $.JquerySelecotrCharChange(template.url + "?" + template.data) + "']")
  61. }
  62. catch (e) {
  64. }
  65. if (template.cache && te != null && te.length > 0) {
  66. $.Tmpl_Data(te, data, fun, template.cache);
  67. return;
  68. }
  70. $.ajax({
  71. type: "GET",
  72. data: template.data,
  73. url: template.url,
  74. dataType: "html",
  75. cache: false,
  76. context: { template: template, data: data },
  77. error: function(e) {
  78. throw "get template error(" + this.template.url + "?" + this.template.data + "):" + e;
  79. },
  80. success: function(tmpltemplate) {
  81. var te = $('<script  type="text/x-jquery-tmpl">' + tmpltemplate + '<\/script>').appendTo(document.body);
  82. te.attr("url", (this.template.url + "?" + this.template.data));
  83. $.Tmpl_Data(te, this.data, fun, this.template.cache);
  84. }
  85. });
  86. }
  87. });
  88. })(jQuery);
  89. 复制代码
测试代码：
前台：
  1. View Code
  3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
  6. <html xmlns="http://www.w3.org/1999/xhtml%22>
  7. <head runat="server">
  8. <title></title>
  10. <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>
  12. <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>
  14. <script type="text/javascript" src="Script/Remote-Tmpl.js"></script>
  16. <script type="text/javascript">
  17. ; String.format = function() {
  18. var s = arguments[0];
  19. for (var i = 0; i < arguments.length - 1; i++) {
  20. var reg = new RegExp("\\{" + i + "\\}", "gm");
  21. s = s.replace(reg, arguments[i + 1]);
  22. }
  24. return s;
  25. };
  26. function AjaxDeleteInvoke(id) {
  27. alert(String.format("AjaxDeleteInvoke:id={0}", id));
  28. }
  29. $(function() {
  30. $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { url: "Tmpl3.aspx", data: "ajax=1" }, function(t, te, da) {
  31. t.appendTo("#test>tbody");
  32. $("#test>tbody table").hide();
  33. $("#test .detailsImg").live("click", function() {
  34. var state = $(this).data("state");
  35. var $tr = $(this).parent().parent();
  36. if (state == "o") {
  37. $("table", $tr.next()).hide();
  38. $(this).data("state", "c");
  40. $(this).attr("src", "Image/folder_o.png");
  41. } else {
  42. $("table", $tr.next()).show();
  43. $(this).data("state", "o");
  44. $(this).attr("src", "Image/folder_c.png");
  45. }
  46. });
  47. });
  49. //            $("#btntest").bind("click", function() {
  50. //            $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { url: "Tmpl3.aspx", data: "ajax=1" }, function(t, te, da) {
  51. //                    t.appendTo("#Table1>tbody");
  52. //                    $("#Table1>tbody table").hide();
  53. //                    $("#Table1 .detailsImg").live("click", function() {
  54. //                        var state = $(this).data("state");
  55. //                        var $tr = $(this).parent().parent();
  56. //                        if (state == "o") {
  57. //                            $("table", $tr.next()).hide();
  58. //                            $(this).data("state", "c");
  60. //                            $(this).attr("src", "Image/folder_o.png");
  61. //                        } else {
  62. //                            $("table", $tr.next()).show();
  63. //                            $(this).data("state", "o");
  64. //                            $(this).attr("src", "Image/folder_c.png");
  65. //                        }
  66. //                    });
  67. //                });
  68. //            });
  70. var data = new Array();
  71. for (var i = 0; i < 19; i++) {
  72. data.push(
  73. {
  74. Name: String.format("学生{0}", i),
  75. Sex: i % 2 == 0 ? "男" : "女",
  76. ID: i,
  77. Class:
  78. [
  79. {
  80. ClassName: String.format("Class{0}", i),
  81. Count: (i + 10) / 2
  82. },
  83. {
  84. ClassName: String.format("Class2{0}", i),
  85. Count: (i + 20) / 2
  86. }
  87. ]
  88. });
  89. }
  90. $("#btntest").bind("click", function() {
  91. $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { remote:false,templateData:data }, function(t, te, da) {
  92. t.appendTo("#Table1>tbody");
  93. $("#Table1>tbody table").hide();
  94. $("#Table1 .detailsImg").live("click", function() {
  95. var state = $(this).data("state");
  96. var $tr = $(this).parent().parent();
  97. if (state == "o") {
  98. $("table", $tr.next()).hide();
  99. $(this).data("state", "c");
  101. $(this).attr("src", "Image/folder_o.png");
  102. } else {
  103. $("table", $tr.next()).show();
  104. $(this).data("state", "o");
  105. $(this).attr("src", "Image/folder_c.png");
  106. }
  107. });
  108. });
  109. });
  110. })
  111. </script>
  113. </head>
  114. <body>
  115. <form id="form1" runat="server">
  116. <div id="div1">
  117. <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0"
  118. id="test" width="500">
  119. <thead>
  120. <tr style="text-align: center; font-size: larger; font-weight: bolder;">
  121. <td>
  122. ID
  123. </td>
  124. <td>
  125. 姓名
  126. </td>
  127. <td>
  128. 性别
  129. </td>
  130. <td>
  131. 操作
  132. </td>
  133. </tr>
  134. </thead>
  135. <tbody>
  136. </tbody>
  137. </table>
  138. <hr />
  139. <p>
  140. 测试缓存系统（url）</p>
  141. <input type="button" id="btntest" value="testcache" />
  142. <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0"
  143. id="Table1" width="500">
  144. <thead>
  145. <tr style="text-align: center; font-size: larger; font-weight: bolder;">
  146. <td>
  147. ID
  148. </td>
  149. <td>
  150. 姓名
  151. </td>
  152. <td>
  153. 性别
  154. </td>
  155. <td>
  156. 操作
  157. </td>
  158. </tr>
  159. </thead>
  160. <tbody>
  161. </tbody>
  162. </table>
  163. </div>
  164. </form>
  165. </body>
  166. </html>
  167. 复制代码
后台ajax数据：
  1. View Code
  3. protected void Page_Load(object sender, EventArgs e)
  4. {
  5. if (Request["ajax"] == "1")
  6. {
  7. Response.Clear();
  8. Response.ContentType = "application/json";
  9. System.Text.StringBuilder sb = new System.Text.StringBuilder("[");
  10. for (int i = 0; i < 20; i++)
  11. {
  12. sb.AppendFormat(@" {{
  13. ""Name"":""学生{0}"",
  14. ""Sex"":""{1}"",
  15. ""ID"": {0},
  16. ""Class"":
  17. [
  18. {{
  19. ""ClassName"":""Class{0}"",
  20. ""Count"": {2}
  21. }},
  22. {{
  23. ""ClassName"":""Class2{0}"",
  24. "" Count"": {3}
  25. }}
  26. ]
  27. }},", i, i % 2 == 0 ? "男" : "女", (i + 10) / 2, (i + 20) / 2);
  28. }
  29. sb.Remove(sb.Length - 1, 1);
  30. sb.Append("]");
  31. Response.Write(sb.ToString());
  32. Response.Flush();
  33. Response.Close();
  34. Response.End();
  35. }
  36. }
  37. 复制代码
效果如上一篇：
demo下载
其他资料：我jQuery系列之目录汇总