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

2024-12-05 07:54:39

在上一篇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();
}
}

效果如上一篇：

demo下载

boxy基于jquery的弹出层对话框插件扩展应用弹出层选择器

我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box
jQuery插件扩展实例【添加回调函数】

本文实例讲述了jQuery插件扩展的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript"> function doSomething(callback) { // - // Call the callback callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量 } function fo
jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）

我选择了jQuery,最主要是它的思想"write less,do more",因为我是一个挑剔的人,以前写过的代码,会时不时翻出来,看看有没有可以精简,优化的地方.一来是对不断学习的推动,二来可以将新的思想,技术应用到里面去. 对于jQuery插件的写法,以前就有介绍过,网上也有很多例子. 这里简要地进行些写法,主要是简写的说明,见下列代码: <script type="text/javascript" src="jquery-1.4.2.js&q
jQuery插件formValidator自定义函数扩展功能实例详解

本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少
jquery.boxy插件的iframe扩展代码

复制代码代码如下: /* <a href="a.html" onclick="return $.qbox(this);" > <a href="a.html" onclick="return qBox.iFLoad(this);" > <a href="a.html" onclick="return qBox.iFrame({src:'b.html'})"
jQuery插件扩展测试实例

本文实例讲述了jQuery插件扩展测试方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-
jQuery插件kinMaxShow扩展效果用法实例

本文实例讲述了jQuery插件kinMaxShow扩展效果用法.分享给大家供大家参考.具体分析如下: 支付宝首页的焦点图就是用的kinMaxShow 扩展效果(前段时间支付宝使用的,不知道现在还是不是这种,另外支付宝的这个焦点图动画效果是分浏览器的,IE8及以下浏览器无动画纯静态,只是在谷歌.火狐等现代浏览器才会出现动画.) 这只是kinMaxShow扩展的一个小例子,更多效果你可以自己发挥. 代码如下: javascript 代码: <script src="js/jquery-1.10
jQuery插件扩展操作入门示例

本文实例讲述了jQuery插件扩展操作.分享给大家供大家参考,具体如下: 如下DEMO 展示了为dom扩展一个myshowHtml 的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> </head> <body
jquery事件机制扩展插件 jquery鼠标右键事件

因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直
jQuery插件扩展extend的简单实现原理

相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {
jQuery autocomplate 自扩展插件、自动完成示例代码

复制代码代码如下: 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplate.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px solid black", "background-color": "white", "position": &quo
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码

尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多). 小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js) 复制代码代码如下: /** * jQuery插件开发方法二:第一步:插件定义 */ jQuery.myPlugin = { //获得浏览器的内核与外壳的类型和版本 Clie

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

相关推荐

随机推荐