首页
所有分类
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 相关文章推荐
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
实现高性能javascript的注意事项
May 27 Javascript
JavaScript函数柯里化
Nov 07 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
埃及购物网站(2) 肯尼亚购物网站(2) 法国购物网站(144) 意大利购物网站(128) 澳大利亚购物网站(309) 印尼购物网站(37) 俄罗斯购物网站(137) 台湾购物网站(77) 墨西哥购物网站(16) 丹麦购物网站(22)
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php生成验证码函数
2015/10/20 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
laravel框架中路由设置，路由参数和路由命名实例分析
2019/11/23 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
JavaScript 继承详解（四）
2009/07/13 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
什么是三层交换，说说和路由的区别在那里
2014/09/01 面试题
外企测试工程师面试题
2015/02/01 面试题
下面代码从性能上考虑，有什么问题
2015/04/03 面试题
职工代表大会主持词
2014/04/01 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL