继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

kala16
关注TA
已关注
手记 260
粉丝 18
获赞 134

在上一篇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,数据);

具体代码如下:

View Code    ; (function($) {       $.extend({           Tmpl_Data: function(te, data, fun, templatecache) {               data = jQuery.extend({ data: "", url: "", templateData: {}, remote: true, cache: true }, data);               if (!data.remote) {                   fun(te.tmpl(data.templateData), te, data.templateData);                   if (!templatecache) {                       te.remove();                   }                   return;               }               var da = te.data("objdata");               if (data.cache && da != null && da != undefined) {                   fun(te.tmpl(da), te, da);                   if (!templatecache) {                       te.remove();                   }                   return;               }                $.ajax({                   type: "GET",                   data: data.data,                   url: data.url,                   dataType: "json",                   cache: false,                   context: { template: te, data: data },                   success: function(tmpldata) {                       fun(this.template.tmpl(tmpldata), this.template, tmpldata);                       if (data.cache) {                           this.template.data("objdata", tmpldata);                       }                        if (!templatecache) {                           this.template.remove();                       }                   },                   error: function(e) {                       throw "get data error(" + this.data.url + "?" + this.data.data + "):" + e;                   }               });            },            JquerySelecotrCharChange: function(str) {               return str.replace(".", "\\.").replace("#", "\\#");           },            Tmpl: function(template, data, fun) {               template = jQuery.extend({ data: "", url: "", templateSelector: "", remote: true, cache: true }, template);                if (!template.remote) {                   $.Tmpl_Data($(template.templateSelector), data, fun, true);                   return;               }               var te = null;               try {                   te = $("script:[url='" + $.JquerySelecotrCharChange(template.url + "?" + template.data) + "']")               }               catch (e) {                }               if (template.cache && te != null && te.length > 0) {                   $.Tmpl_Data(te, data, fun, template.cache);                   return;               }                $.ajax({                   type: "GET",                   data: template.data,                   url: template.url,                   dataType: "html",                   cache: false,                   context: { template: template, data: data },                   error: function(e) {                       throw "get template error(" + this.template.url + "?" + this.template.data + "):" + e;                   },                   success: function(tmpltemplate) {                       var te = $('<script  type="text/x-jquery-tmpl">' + tmpltemplate + '<\/script>').appendTo(document.body);                       te.attr("url", (this.template.url + "?" + this.template.data));                       $.Tmpl_Data(te, this.data, fun, this.template.cache);                   }               });           }       });   })(jQuery);  复制代码

测试代码:

前台:

View Code    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>   <html xmlns="http://www.w3.org/1999/xhtml%22>   <head runat="server">       <title></title>        <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>        <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>        <script type="text/javascript" src="Script/Remote-Tmpl.js"></script>        <script type="text/javascript">           ; String.format = function() {               var s = arguments[0];               for (var i = 0; i < arguments.length - 1; i++) {                   var reg = new RegExp("\\{" + i + "\\}", "gm");                   s = s.replace(reg, arguments[i + 1]);               }                return s;           };           function AjaxDeleteInvoke(id) {               alert(String.format("AjaxDeleteInvoke:id={0}", id));           }           $(function() {           $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { url: "Tmpl3.aspx", data: "ajax=1" }, function(t, te, da) {                   t.appendTo("#test>tbody");                   $("#test>tbody table").hide();                   $("#test .detailsImg").live("click", function() {                       var state = $(this).data("state");                       var $tr = $(this).parent().parent();                       if (state == "o") {                           $("table", $tr.next()).hide();                           $(this).data("state", "c");                            $(this).attr("src", "Image/folder_o.png");                       } else {                           $("table", $tr.next()).show();                           $(this).data("state", "o");                           $(this).attr("src", "Image/folder_c.png");                       }                   });               });    //            $("#btntest").bind("click", function() {   //            $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { url: "Tmpl3.aspx", data: "ajax=1" }, function(t, te, da) {   //                    t.appendTo("#Table1>tbody");   //                    $("#Table1>tbody table").hide();   //                    $("#Table1 .detailsImg").live("click", function() {   //                        var state = $(this).data("state");   //                        var $tr = $(this).parent().parent();   //                        if (state == "o") {   //                            $("table", $tr.next()).hide();   //                            $(this).data("state", "c");    //                            $(this).attr("src", "Image/folder_o.png");   //                        } else {   //                            $("table", $tr.next()).show();   //                            $(this).data("state", "o");   //                            $(this).attr("src", "Image/folder_c.png");   //                        }   //                    });   //                });   //            });                var data = new Array();               for (var i = 0; i < 19; i++) {                   data.push(                   {                       Name: String.format("学生{0}", i),                       Sex: i % 2 == 0 ? "男" : "女",                       ID: i,                       Class:                       [                           {                               ClassName: String.format("Class{0}", i),                               Count: (i + 10) / 2                           },                            {                                ClassName: String.format("Class2{0}", i),                                Count: (i + 20) / 2                            }                      ]                   });               }               $("#btntest").bind("click", function() {                   $.Tmpl({ url: "TmplTemplate.htm", data: "test=1" }, { remote:false,templateData:data }, function(t, te, da) {                       t.appendTo("#Table1>tbody");                       $("#Table1>tbody table").hide();                       $("#Table1 .detailsImg").live("click", function() {                           var state = $(this).data("state");                           var $tr = $(this).parent().parent();                           if (state == "o") {                               $("table", $tr.next()).hide();                               $(this).data("state", "c");                                $(this).attr("src", "Image/folder_o.png");                           } else {                               $("table", $tr.next()).show();                               $(this).data("state", "o");                               $(this).attr("src", "Image/folder_c.png");                           }                       });                   });               });           })       </script>    </head>   <body>       <form id="form1" runat="server">       <div id="div1">           <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0"               id="test" width="500">               <thead>                   <tr style="text-align: center; font-size: larger; font-weight: bolder;">                       <td>                           ID                       </td>                       <td>                           姓名                       </td>                       <td>                           性别                       </td>                       <td>                           操作                       </td>                   </tr>               </thead>               <tbody>               </tbody>           </table>           <hr />           <p>               测试缓存系统(url)</p>           <input type="button" id="btntest" value="testcache" />           <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0"               id="Table1" width="500">               <thead>                   <tr style="text-align: center; font-size: larger; font-weight: bolder;">                       <td>                           ID                       </td>                       <td>                           姓名                       </td>                       <td>                           性别                       </td>                       <td>                           操作                       </td>                   </tr>               </thead>               <tbody>               </tbody>           </table>       </div>       </form>   </body>   </html>  复制代码

后台ajax数据:

View Code    protected void Page_Load(object sender, EventArgs e)   {       if (Request["ajax"] == "1")       {           Response.Clear();           Response.ContentType = "application/json";           System.Text.StringBuilder sb = new System.Text.StringBuilder("[");           for (int i = 0; i < 20; i++)           {               sb.AppendFormat(@" {{                   ""Name"":""学生{0}"",                   ""Sex"":""{1}"",                   ""ID"": {0},                   ""Class"":                   [                       {{                           ""ClassName"":""Class{0}"",                           ""Count"": {2}                       }},                        {{                            ""ClassName"":""Class2{0}"",                           "" Count"": {3}                        }}                  ]               }},", i, i % 2 == 0 ? "男" : "女", (i + 10) / 2, (i + 20) / 2);           }           sb.Remove(sb.Length - 1, 1);           sb.Append("]");           Response.Write(sb.ToString());           Response.Flush();           Response.Close();           Response.End();       }   }  复制代码


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP