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下载
Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php精度计算的问题解析
2019/06/21 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
ES6关于Promise的用法详解
2018/05/07 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
经济管理专业自荐信
2013/12/30 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
化学专业自荐信
2014/05/28 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python