JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇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,数据);
具体代码如下:
- View Code
- ; (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);
- 复制代码
测试代码:
前台:
- View Code
- <%@ 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数据:
- View Code
- 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下载
其他资料:我jQuery系列之目录汇总
转载于:https://blog.51cto.com/whitewolfblog/835204
JQuery模板插件jquery.tmpl-动态ajax扩展相关推荐
- Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...
直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
- ajax 阻止默认提交,jQuery验证插件:在对ajax调用servlet时,submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...
- jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
- jquery 滚轮插件 jquery.mousewheel.js
jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js. Github地址:jquery-mouse ...
- jquery模板插件jTemplates代替拼html
jQuery的jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成. jQuery的jTemplates官方网站:http://jtemplates.tpython.co ...
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- jQuery条形码插件 jQuery Barcode
jQuery Barcode 是一个用来创建条形码的 jQuery 插件. 在线演示 首先介绍下条形码的原理先: 条形码技术最早产生在风声鹤唳的二十年代,诞生于Westinghouse的实验室里.一位 ...
最新文章
- 服务器崩溃日志 | 误删 OpenSSL 的那点事
- 三代测序数据分析之文献推荐
- 深入浅出OOP(四): 多态和继承(抽象类)
- python软件开发-Python -- 软件开发规范
- c++批量重命名_文件批量重命名?这个方法百试百灵
- 会计证考试《财经法规与职业道德》第一章精选题
- stay hungry stay foolish原文_弟子规原文+译文+注释
- mysql 在windows中安装问题
- [渝粤教育] 武汉交通职业学院 现代物流管理概论 参考 资料
- SQL Server 函数的使用(字符串函数)
- Java面试题-Java中的锁
- Python实现供应链数据分析
- java.util 语言_java中的import java.util是什么意思
- JAVA泛型尖括号中的 T 和 ? 有什么区别?
- 戴尔390计算机电源问题,DELL笔记本电脑电源适配器无电压输出故障
- [无私分享]最新网盘资源搜索站点
- Audition 入门系列(合集)_MediaTea的博客-CSDN博客
- 2020.09.29重读 原2020.08.04读 MoreFusion
- if 语句与switch语句
- Labview中运行时按钮不自动复位
热门文章
- 一维码EAN 8简介及其解码实现(zxing-cpp)
- Ubuntu 32下Android NDK+NEON的配置过程及简单使用举例
- html表格上下移动,Vue实现table上下移动功能示例
- linux挂载media装服务,CentOS8服务器入门系列教程(五):Linux挂载光盘、yum安装软件包...
- 136. 只出现一次的数字(关于异或的使用)
- linux rm 提示io异常,Hadoop异常 java.io.IOException: Job status not available
- c语言 字母 八进制表示'/1011',C语言C语言第一课:C语言概述为什么学习C语言怎样学习C语言.DOC...
- log4j在eclipse上使用简介
- php webapi验签,Asp.netCore3.0 WebApi从0到1手摸手教你写【5】增加接口参数签名验证...
- mysql 中文截取_mysql 截取中文字符