推荐好用的Jquery模板插件Jtemplate

最新推荐文章于 2019-10-20 22:15:25 发布

JRoger_

最新推荐文章于 2019-10-20 22:15:25 发布

阅读量734

点赞数

分类专栏：【 jQuery 】文章标签： jquery javascript 模板引擎 function table 扩展

【 jQuery 】专栏收录该内容

3 篇文章

订阅专栏

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

数据准备：

 
   view plain 
   print 
   ? 
  
 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、引入库文件

 
   view plain 
   print 
   ? 
  
 <script type="text/javascript" src="jquery.js"></script>  
 <script type="text/javascript" src="jquery-jtemplates.js"></script>  

2、编写模板

 
    view plain 
    print 
    ? 
   
 <div id="<span style="color:#FF0000;">result</span>"></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}

例子：

 
    view plain 
    print 
    ? 
   
 {#if $T=="true"} good {#else} fail {#/if}  

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

{#foreach}

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

例子：

a、输出所有数据：

 
    view plain 
    print 
    ? 
   
 {#foreach $T.table as row}      {$T.row.Title}      {/for}     

b、从第二条记录开始输出：

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

c、从第二条开始且只取2条

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

d、使用step

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

e、使用else

 
   view plain 
   print 
   ? 
  
 {#foreach $T.table as row step=2}      {$T.row.Title}  {#else}   无记录   {/for}   

{#for}

例子：

 
   view plain 
   print 
   ? 
  
 {#for index = 1 to 10} {$T.index} {#/for}  

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

3、渲染模板并展示

 
    view plain 
    print 
    ? 
   
 <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、运行结果：

完整代码

 
    view plain 
    print 
    ? 
   
 <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>  