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

发布时间：2020-06-08 05:31:56 来源：网络阅读：1129 作者：破狼栏目：web开发

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

效果如上一篇：

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

demo下载

其他资料：我jQuery系列之目录汇总

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

相关标签