推薦好用的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、引入庫文件

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

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、渲染模板並展示

<script type="text/javascript">  
        $(document).ready(function() { 
            // 設置模板 
            $("#result").setTemplateElement("templateContainer"); 
             
            // 處理模板 
            $("#result").processTemplate(data); 
        });  
    </script>  

設置模板的幾種方法:

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> 

摘自 如果有一天…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。