代码改变世界

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

2011-11-09 20:21  破狼  阅读(4408)  评论(1编辑  收藏  举报

   在上一篇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 - 11); 
        sb.Append("]"); 
        Response.Write(sb.ToString()); 
        Response.Flush(); 
        Response.Close(); 
        Response.End(); 
    } 
}

效果如上一篇:

未命名

demo下载

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