行业资讯

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

发布时间：2020-06-08 05:31:56 作者：破狼
来源：网络 阅读：1130

在上一篇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. 复制代码 

效果如上一篇：

 

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

demo下载

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

推荐阅读：
  1. 利用jQuery无插件创建可扩展目录树
  2. 我的jQuery动态表格插件二

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

数据 ajax 动态

上一篇：android 动态、静态壁纸实现

下一篇：MongoDB笔记四——查询操作

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号