首页
所有分类
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插件开发全解析
Oct 10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 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) 华为(1) 鸿蒙(2) Debian(1) RustDesk(1) HarmonyOS(1) 鸿蒙3.0(1) xhunter1.sys(1) 蓝牙耳机(1) 蓝牙(1)
You might like
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python+Wordpress制作小说站
2017/04/14 Python
在Python中使用Neo4j的方法
2019/03/14 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
英国豪华真皮和布艺沙发销售网站：Darlings of Chelsea
2018/01/05 全球购物
法国最大电子商务平台：Cdiscount
2018/03/13 全球购物
屈臣氏俄罗斯在线商店：Watsons俄罗斯
2020/08/03 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
运动会广播稿300字
2014/01/10 职场文书
电工工作职责范本
2014/02/22 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
2014年党支部承诺书
2014/05/30 职场文书
商场父亲节活动方案
2014/08/27 职场文书
求职意向书范本
2015/05/11 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书