在上一篇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系列之目录汇总