快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板，或者数据，根据url参数或者其他信息加载不同的模板，数据。在我的某个项目中有这个需求，所以特地写成jquery工具函数，加入了本地数据和ajax数据加载模板，数据的方式。

创新互联2013年开创至今，先为渭城等服务建站，渭城等地企业，进行企业商务咨询服务。为渭城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

参数说明：

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 = $('' + 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.    
  6.    
  7.    
  8.        
  9.  
  10.        
  11.  
  12.        
  13.  
  14.        
  15.  
  16.        
  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.        
  112.  
  113.    
  114.    
  115.        
  116.        
  117.         
  118.             id="test" width="500">   
  119.                
  120.                    
  121.                        
  122.                         ID   
  123.                        
  124.                        
  125.                         姓名   
  126.                        
  127.                        
  128.                         性别   
  129.                        
  130.                        
  131.                         操作   
  132.                        
  133.                    
  134.                
  135.                
  136.                
  137.            
  138.            
  139.         
       
  140.             测试缓存系统（url）
       
  141.            
  142.         
  143.             id="Table1" width="500">   
  144.                
  145.                    
  146.                        
  147.                         ID   
  148.                        
  149.                        
  150.                         姓名   
  151.                        
  152.                        
  153.                         性别   
  154.                        
  155.                        
  156.                         操作   
  157.                        
  158.                    
  159.                
  160.                
  161.                
  162.            
  163.     
   
  •        
  •    
  •  
  • 复制代码 

    • 后台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. 复制代码 

    效果如上一篇：

     

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

    demo下载

    其他资料：我jQuery系列之目录汇总


    网站标题：JQuery模板插件jquery.tmpl-动态ajax扩展
    分享链接：http://6mz.cn/article/iedosg.html

    其他资讯