你的位置:首页 > Java教程

[Java教程]template.js入门使用的一些心得

template.js插件在表格渲染方面还是极其出色的,当数据在异步加载后不用使用传统的方式,在ajax里面拼接html语句加载表格,直接用这个插件将ajax传回来的json数组直接渲染在前端中,省下了不少时间。 我使用template.js主要是满足项目实现为目的,不是深入探究,总结一下我在项目里基本使用这个插件哪些功能,主要是数据的展示,each循环以及if语句简单使用。 基本上会了这些,使用ajax异步加载出来一个表格是没什么问题的。  1、引入template.js插件引用jquery.template.js 2、基本使用方法:在.jsp中需要用到此模板渲染表格的地方,标记id: 1 <table class="table-form" id="demoTable"></table>  一般在jsp的底部使用:
1 <script type="text/html" id="demoTableTemp">2  <tr>3   <td>\${index}</td>4   <td>\${name}</td>5   <td>\${sex}</td>6   <td>\${age}</td>7  </tr>8 </script>

 

在js中使用异步加载一般得到的数据格式需要是一个数组,组装格式如下:
 1 [{ 2 "index":1, 3 "name":"张三", 4 "sex":"男", 5 "age":"18" 6 },{ 7 "index":2, 8 "name":"李四", 9 "sex":"女",10 "age":"18"11 }]

 

js中将此data引入jsp中时应用:(不仅可以使用id,也可以使用.class) 1 $('#demoTableTemp').tmpl(data).appendTo('#demoTable');  此时会按照数组的格式,循环渲染表格模板。 3、each循环:表格行中单元格是数组的情况,需要用到循环嵌套的方法:(暂时没有很好的方法)如果组装的data中,此项是数组时,需要将它再次组装,组装成对象内嵌套对象的模式,比如:

 

此时应将它组装为:
 1 [ 2  { 3   ... 4   "likes": { 5    "like": "apple", 6    "like": "football" 7   } 8  }, 9  {10   ...11   "likes": {12    "like": "orange",13    "like": "book"14   }15  }16 ]
View Code此时在jsp的底部应当使用each循环:
 1 <script type="text/html" id="demoTableTemp"> 2  <tr> 3   <td>\${index}</td> 4   <td>\${name}</td> 5   <td>\${sex}</td> 6   <td>\${age}</td><td> 7  {{each likes}} 8  <p>\${like}</p> 9  {{/each}}10 </td>11  </tr>12 </script>
 4:使用if判断语句:比较简单的属于单双行不一致问题:使用{{if (index+1)%2 == 0 }}{{/if}}和{{if (index+1)%2 == 1 }}{{/if}}可以满足基本的判断语句