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 ]
此时在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}}可以满足基本的判断语句
作者:少鬼离
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。