推薦好用的Jquery模板插件Jtemplate

原創 JRoger_ 2018-09-01 19:16

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


數據準備：

view plainprint?
  1. var data ={  
  2. TotalCount:64,  
  3. Lists:[  
  4. {Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},  
  5. {Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},  
  6. {Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},  
  7. {Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},  
  8. {Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},  
  9. ]  
  10. }  


1、引入庫文件

view plainprint?
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript" src="jquery-jtemplates.js"></script>  


2、編寫模板

view plainprint?
  1. <div id="<span style="color:#FF0000;">result</span>"></div>  
  2. <div id="templateContainer" style="display:none;">  
  3. <table>  
  4. <tr><td>Id</td><td>標題</td><td>發佈時間</td></tr>  
  5. {#foreach $T.table as row}  
  6. <tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr>  
  7. {#/for}  
  8. </table>  
  9. </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}

例子：
view plainprint?
  1. {#if $T=="true"} good {#else} fail {#/if}  
view plainprint?
  1. {#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}  


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


例子：
a、輸出所有數據：
view plainprint?
  1. {#foreach $T.table as row}      {$T.row.Title}      {/for}     

b、從第二條記錄開始輸出：
view plainprint?
  1. {#foreach $T.table as row begin=1}      {$T.row.Title}      {/for}     

c、從第二條開始且只取2條
view plainprint?
  1. {#foreach $T.table as row begin=1 count=2}      {$T.row.Title}      {/for}     

d、使用step
view plainprint?
  1. {#foreach $T.table as row step=2}      {$T.row.Title}      {/for}   

e、使用else

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


{#for}
例子：

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



3、渲染模板並展示


view plainprint?
  1. <script type="text/javascript">   
  2.         $(document).ready(function() {  
  3.             // 設置模板  
  4.             $("#result").setTemplateElement("templateContainer");  
  5.               
  6.             // 處理模板  
  7.             $("#result").processTemplate(data);  
  8.         });   
  9.     </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、運行結果：



完整代碼
view plainprint?
  1. <html>   
  2. <head>   
  3.   
  4.     <script type="text/javascript" src="jquery.js"></script>  
  5.   
  6.     <script type="text/javascript" src="jquery-jtemplates.js"></script>  
  7.   
  8.     <title>jTemplates</title>  
  9.   
  10.     <script type="text/javascript">   
  11.         var data ={  
  12.                 TotalCount:64,  
  13.                 Lists:[  
  14.                     {Id:'2001' ,Title:'新聞11',CreateDate:'2011-08-08'},  
  15.                     {Id:'2002' ,Title:'新聞22',CreateDate:'2011-08-08'},  
  16.                     {Id:'2003' ,Title:'新聞33',CreateDate:'2011-08-08'},  
  17.                     {Id:'2004' ,Title:'新聞44',CreateDate:'2011-08-08'},  
  18.                     {Id:'2005' ,Title:'新聞55',CreateDate:'2011-08-08'},  
  19.                 ]  
  20.         };  
  21.         $(document).ready(function() {  
  22.             // 設置模板  
  23.             $("#result").setTemplateElement("templateContainer");  
  24.               
  25.             // 處理模板  
  26.             $("#result").processTemplate(data);  
  27.         });   
  28.     </script>  
  29.   
  30. </head>  
  31. <body>  
  32.     <div id="result">  
  33.     </div>  
  34.     <textarea id="templateContainer" style="display: none;">  
  35.         <table border="1">  
  36.             <tr>  
  37.                 <td>  
  38.                     Id  
  39.                 </td>  
  40.                 <td>  
  41.                     標題  
  42.                 </td>  
  43.                 <td>  
  44.                     發佈時間  
  45.                 </td>  
  46.             </tr>  
  47.             {#foreach $T.Lists as row}  
  48.             <tr>  
  49.                 <td>  
  50.                     {$T.row.Id}  
  51.                 </td>  
  52.                 <td>  
  53.                     {$T.row.Title}  
  54.                 </td>  
  55.                 <td>  
  56.                     {$T.row.CreateDate}  
  57.                 </td>  
  58.             </tr>  
  59.             {#/for}  
  60.         </table>  
  61.     </textarea>  
  62. </body>  
  63. </html>  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

jQuery動態添加的元素綁定事件處理函數

JRoger_ 2018-09-01 19:16:20

搞了個CSS樹節點ico，沒有圖片哦

JRoger_ 2018-09-01 19:16:17