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

在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板，或者数据，根据url参数或者其他信息加载不同的模板，数据。在我的某个项目中有这个需求，所以特地写成jquery工具函数，加入了本地数据和ajax数据加载模板，数据的方式。

创新互联2013年开创至今，先为渭城等服务建站，渭城等地企业，进行企业商务咨询服务。为渭城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

参数说明：

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 = $('' + 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" %>   
 
   
   
   
       
 
       
 
       
 
       
 
       
        ; 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");   
                        }   
                    });   
                });   
            });   
        })   
       
 
   
   
       
       
        
            id="test" width="500">   
               
                   
                       
                        ID   
                       
                       
                        姓名   
                       
                       
                        性别   
                       
                       
                        操作   
                       
                   
               
               
               
           
           
        
   
            测试缓存系统（url）
   
           
        
            id="Table1" width="500">   
               
                   
                       
                        ID   
                       
                       
                        姓名   
                       
                       
                        性别   
                       
                       
                        操作