JQuery模板插件jquery.tmpl-动态ajax扩展

在上一篇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   
2.  
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.             }   
22.  
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.                     }   
35.  
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.             });   
44.  
45.         },   
46.  
47.         JquerySelecotrCharChange: function(str) {   
48.             return str.replace(".", "\\.").replace("#", "\\#");   
49.         },   
50.  
51.         Tmpl: function(template, data, fun) {   
52.             template = jQuery.extend({ data: "", url: "", templateSelector: "", remote: true, cache: true }, template);   
53.  
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) {   
63.  
64.             }   
65.             if (template.cache && te != null && te.length > 0) {   
66.                 $.Tmpl_Data(te, data, fun, template.cache);   
67.                 return;   
68.             }   
69.  
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   
2.  
3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>   
4.  
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>   
9.  
10.     <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>   
11.  
12.     <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>   
13.  
14.     <script type="text/javascript" src="Script/Remote-Tmpl.js"></script>   
15.  
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.             }   
23.  
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");   
39.  
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.             });   
48.  
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");   
59.  
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. //            });   
69.  
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");   
100.  
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>   
112.  
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   
2.  
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系列之目录汇总

 本文转自 破狼 51CTO博客，原文链接：http://blog.51cto.com/whitewolfblog/835204，如需转载请自行联系原作者