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

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

阅读量：6416 次

发布时间：2019-06-23

本文共 7370 字，大约阅读时间需要 24 分钟。

   在上一篇中介绍了这款插件。有时我们需要去动态的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();

    }

}

效果如上一篇：