template.js插件在表格渲染方面還是極其出色的，當數據在非同步載入後不用使用傳統的方式，在ajax裡面拼接html語句載入表格，直接用這個插件將ajax傳回來的json數組直接渲染在前端中，省下了不少時間。 我使用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}}可以滿足基本的判斷語句
