推薦好用的Jquery模板外掛程式jTemplates
jTemplates是javascript的模板引擎,基於jquery的外掛程式。官方網址: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、編寫模板
<div id="result"></div><div 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></div>
文法:
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> <div id="result"> </div> <textarea id="templateContainer" style="display: none;"> <table border="1"> <tr> <td> Id </td> <td> 標題 </td> <td> 發布時間 </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>