推薦好用的Jquery模板插件Jtemplate – Javascript教程_JS教程_技術文章 – 程式設計聯盟

jtemplate是javascript的模板引擎。官方網址：http://jtemplates.tpython.com/數據準備：

var data ={
TotalCount:64,
Lists:[
{Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},
{Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},
{Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},
{Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},
{Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},
]
}

1、引入庫文件

2、編寫模板

<p id="<span style="color:#FF0000;">result</span>"></p>
<p id="templateContainer" style="display:none;">
<table>
<tr><td>Id</td><td>標題</td><td>發佈時間</td></tr>
{#foreach $T.table as row}
<tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr>
{#/for}
</table>
</p>

語法：

1、大括號{..} ，在這裡面可以寫任何javascript的代碼，比如 {$T.toUpperCase()}

2、{$T} : 表示數據，例如上面的例子，$T.table表示得到data的table對象，$T.TotalCount 為 64。

3、{#foreach} : 循環獲取數據，如上面：{#foreach $T.table as row} {$T.row.Title} {/for}

擴展語法：

{#if}

例子：

{#if $T=="true"} good {#else} fail {#/if}

{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

{#foreach}

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

例子：
a、輸出所有數據：

{#foreach $T.table as row} {$T.row.Title} {/for}

b、從第二條記錄開始輸出：

{#foreach $T.table as row begin=1} {$T.row.Title} {/for}

c、從第二條開始且隻取2條

{#foreach $T.table as row begin=1 count=2} {$T.row.Title} {/for}

d、使用step

{#foreach $T.table as row step=2} {$T.row.Title} {/for}

e、使用else

{#foreach $T.table as row step=2} {$T.row.Title} {#else} 無記錄 {/for}

{#for}
例子：

{#for index = 1 to 10} {$T.index} {#/for}

{#for index = 1 to 10 step=3} {$T.index} {#/for}

3、渲染模板並展示

設置模板的幾種方法：

a. setTemplateElement:參數為頁面中的一個元素ID
如上面的例子

b. setTemplate: 參數為具體的模板內容，
如：$("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");

c.setTemplateURL:使用外部獨立模板文件Url作為參數
如：$("#result").setTemplateURL("example_multitemplate1.tpl");

4、運行結果：

完整代碼

<html>
<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript">
        var data ={
                TotalCount:64,
                Lists:[
                    {Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},
                    {Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},
                    {Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},
                    {Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},
                    {Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},
                ]
        };
        $(document).ready(function() {
            // 設置模板
            $("#result").setTemplateElement("templateContainer");

            // 處理模板
            $("#result").processTemplate(data);
        });
    </script>

</head>
<body>
    <p id="result">
    </p>
    <textarea id="templateContainer" style="display: none;">
        <table border="1">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    標題
                </td>
                <td>
                    發佈時間 www.aiwalls.com
                </td>
            </tr>
            {#foreach $T.Lists as row}
            <tr>
                <td>
                    {$T.row.Id}
                </td>
                <td>
                    {$T.row.Title}
                </td>
                <td>
                    {$T.row.CreateDate}
                </td>
            </tr>
            {#/for}
        </table>
    </textarea>
</body>
</html>

摘自如果有一天…

發佈留言 取消回覆

發佈留言取消回覆