首页
所有分类
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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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) Xception(1) ResNet50(1) 内存泄露(1) PostMapping(1) 小喇叭(1) Lifecycle(1) 微信(2) Spring(9)
You might like
PHP制作图型计数器的例子
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
canvas绘制万花筒效果（代码分享）
2017/01/20 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
python实用代码片段收集贴
2015/06/03 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
携程英文网站：Trip.com
2017/02/07 全球购物
基督教卡片、励志礼品、家居装饰等：DaySpring
2018/10/12 全球购物
运动会表扬稿大全
2014/01/16 职场文书
服务员自我评价
2014/01/25 职场文书
个性发展自我评价
2014/02/11 职场文书
毕业实习计划书
2015/01/16 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书