资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/iedosg.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    郫县明安消防器材SSL认证南宁旺客科技服务器托管成都网站设计制作公司装饰公司网站建设方案小谭建站郫县门窗定制四川审计公司成都网站建设

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图