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

2025-02-11 技术教程

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

具体代码如下：

ViewCode ;(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; } varda=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"getdataerror("+this.data.url+"?"+this.data.data+"):"+e; } }); }, JquerySelecotrCharChange:function(str){ returnstr.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; } varte=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"gettemplateerror("+this.template.url+"?"+this.template.data+"):"+e; }, success:function(tmpltemplate){ varte=$('<scripttype="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); 复制代码

测试代码：

前台：

ViewCode <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Tmpl3.aspx.cs"Inherits="Tmpl3"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22> <htmlxmlns="http://www.w3.org/1999/xhtml%22> <headrunat="server"> <title></title> <scriptsrc="Script/jquery-1.6.4.js"type="text/javascript"></script> <scriptsrc="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js"type="text/javascript"></script> <scripttype="text/javascript"src="Script/Remote-Tmpl.js"></script> <scripttype="text/javascript"> ;String.format=function(){ vars=arguments[0]; for(vari=0;i<arguments.length-1;i++){ varreg=newRegExp("\\{"+i+"\\}","gm"); s=s.replace(reg,arguments[i+1]); } returns; }; functionAjaxDeleteInvoke(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>tbodytable").hide(); $("#test.detailsImg").live("click",function(){ varstate=$(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>tbodytable").hide(); //$("#Table1.detailsImg").live("click",function(){ //varstate=$(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"); //} //}); //}); //}); vardata=newArray(); for(vari=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>tbodytable").hide(); $("#Table1.detailsImg").live("click",function(){ varstate=$(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> <formid="form1"runat="server"> <divid="div1"> <tablestyle="margin-top:10;margin-left:300px;"border="1"cellpadding="0"cellspacing="0" id="test"width="500"> <thead> <trstyle="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> <inputtype="button"id="btntest"value="testcache"/> <tablestyle="margin-top:10;margin-left:300px;"border="1"cellpadding="0"cellspacing="0" id="Table1"width="500"> <thead> <trstyle="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数据：

ViewCode protectedvoidPage_Load(objectsender,EventArgse) { if(Request["ajax"]=="1") { Response.Clear(); Response.ContentType="application/json"; System.Text.StringBuildersb=newSystem.Text.StringBuilder("["); for(inti=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(); } } 复制代码

效果如上一篇：

demo下载

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