讓jquery.tmpl.js支持index序號

時間 2019-11-12

標籤 jquery.tmpl.js jquery tmpl 支持 index 序號欄目 JQuery 简体版

原文原文鏈接

在寫Web程序時，想簡單處理會使用JS模板，經常使用的是Jquery的jquery.tmpl.js插件。整個插件仍是比較好用的，後續有機會結合實際應用案例，分享下應用方法。javascript

本次文章想分享的一點是其中的一個很小的細節：支持行標index。html

具體的使用場景是：經過表格展現數據，同時第一列爲序號，會存在刪除、新增行的按鈕操做。java

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="../_common/jquery-1.12.2.min.js"></script>
 5 <script src="../_common/jquery.tmpl.min.js"></script>
 6 </head>
 7 <body>
 8 <table id="list">
 9     <tr class="tableHead">
10         <td>序號</td>
11         <td>名稱</td>
12         <td>代碼</td>
13         <td>類型</td>       
14     </tr>
15 </table>
16 <script id="tmp" type="text/x-jquery-tmpl">
17     <tr>
18         <td>${Number(id)+1}</td>
19         <td>${name}</td>
20         <td>${code}</td>
21         <td>${type}</td>
22     </tr>
23 </script>
24 <script type="text/javascript">
25     $(document).ready(function () {
26         var list = [
27             { id:"0", name: "javascript", code: "001", type: "web" },            
28             { id:"1", name: "asp.net", code: "004", type: "server" },
29             { id:"2", name: "sql", code: "005", type: "db" }
30         ];
31         $("#tmp").tmpl(list).appendTo("#list");
32     });
33 </script>
34 </body>
35 </html>

如上，若是要實現行序號，則須要在數據集合中加入一個屬性返回行號，這樣就會致使很是麻煩。當存在刪除或新增行時，若要刷新展現，還須要刷新數據的id屬性，不方便操做。其實若是可以利用table的rowindex或者其餘的方式，能夠較好的利用dom屬性或數組index來處理，那就會方便不少了。jquery

基於此思路，咱們改造jquery.tmpl.js的tmpl函數。以下圖，對於未壓縮的插件源碼，處理以下：web

爲了不數據集合中存在index對象，故特地加了一個$以做區分，使用時用$index屬性進行取值便可。sql

如果須要改造jquery.tmpl.min.js，因爲作了代碼混淆，搜索map函數，第一個調用的地方按照如上邏輯調整便可。數組

調整後的調用方式：app

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="../_common/jquery-1.12.2.min.js"></script>
 5 <script src="../_common/jquery.tmpl.min.js"></script>
 6 </head>
 7 <body>
 8 <table id="list">
 9     <tr class="tableHead">
10         <td>序號</td>
11         <td>名稱</td>
12         <td>代碼</td>
13         <td>類型</td>       
14     </tr>
15 </table>
16 <script id="tmp" type="text/x-jquery-tmpl">
17     <tr>
18         <td>${$index+1}</td>
19         <td>${name}</td>
20         <td>${code}</td>
21         <td>${type}</td>
22     </tr>
23 </script>
24 <script type="text/javascript">
25     $(document).ready(function () {
26         var list = [
27             { name: "javascript", code: "001", type: "web" },            
28             { name: "asp.net", code: "004", type: "server" },
29             { name: "sql", code: "005", type: "db" }
30         ];
31         $("#tmp").tmpl(list).appendTo("#list");
32     });
33 </script>
34 </body>
35 </html>

如上爲新的調用方式，是否是方便了不少。asp.net

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。