首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 10, 2011

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

具体代码如下： 

; (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);

测试代码：
前台： 
<%@ 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数据： 
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(); 
} 
}

效果如上一篇：

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

demo下载

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
angularJS中router的使用指南
Feb 09 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
理解 JavaScript Scoping &amp; Hoisting（二）
Nov 18 Javascript
Bootstrap项目实战之首页内容介绍（全）
Apr 25 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 #Javascript
Javascript中的isNaN函数使用说明
Nov 10 #Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 #Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 #Javascript
用jquery和json从后台获得数据集的代码
Nov 07 #Javascript
JS重要知识点小结
Nov 06 #Javascript
javascript日期转换 时间戳转日期格式
Nov 05 #Javascript
百度地图(1) XDM(3) 继承(1) 验证表达式(1) 构造函数(1) variables(1) PyAutoGUI(1) 封装(1) promise(2) gRPC(3)
You might like
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
JS实现吸顶特效
2020/01/08 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python实现井字棋游戏
2020/03/30 Python
Django URL传递参数的方法总结
2016/08/28 Python
pycharm安装和首次使用教程
2018/08/27 Python
Python之pymysql的使用小结
2019/07/01 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python是怎样处理json模块的
2020/07/16 Python
python 调整图片亮度的示例
2020/12/03 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
英国第一的市场和亚马逊替代品：OnBuy
2019/03/16 全球购物
英国名牌男装店：Standout
2021/02/17 全球购物
有趣的广告词
2014/03/18 职场文书
老师对学生的寄语
2014/04/09 职场文书
新闻人物通讯稿
2014/10/09 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书