如何使用jQuery模板JSON響應

Question

建立5列的表下面是我的JSON響應

"Table" : [ 
     { 
      "CompanyName" : "Company1", 
      "Title" : "xxx", 
      "URL" : "http://www.xyz.com", 
      "FileNameStatus" : "active" 
     }, 
     { 
      "CompanyName" : "Company2", 
      "Title" : "xxx", 
      "URL" : "http://www.xyz1.com", 
      "FileNameStatus" : "inactive" 
     }, 
     ... 

$("#tableTemplate").tmpl(data.Table).appendTo("#tblid"); 

<script id="tableTemplate" type="text/x-jquery-tmpl">     
    <tr> 
     <td>  
      <a href="${URL}" target="_blank"> 
       <img src="${FileNameStatus}.jpg" title="${Title}" /> 
      </a>      
     </td> 
     </tr> 
    </script>  

<div id="rightWrapper"> 
    <table id="tblid"> 
    </table> 
</div> 

我尋找是建立一個表5列和n行（列水平重複）。

eg: 
col1 col2 col3 col4 col5 
col6 col7 col8 col9 col10 
col11 col12 col13 
..... 
.... 

如何用上面的數據結構和jQuery模板構建這樣的表？ 在此先感謝。

Answer 1

一種解決方案是不直接由模板處理您陣列（因此，它執行用於陣列中的每個項中的模板）。相反，你可以傳遞包含你的數組的對象（所以，傳遞包含data.Table的數據）。

然後，在您的模板中，當您使用{{each}}遍歷單元格時，您可以完全訪問索引。採用模塊化的分工就可以正常啓動和結束行，如：

<script id="tableTemplate" type="text/html"> 
    <table> 
     {{each(i, cell) Table}} 
      {{if i % 5 == 0}} 
      <tr> 
      {{/if}} 
      <td>  
       <a href="${URL}" target="_blank"> 
        <img src="${FileNameStatus}.jpg" title="${Title}" /> 
       </a>      
      </td> 
      {{if (i % 5 == 4) || (i == Table.length-1)}} 
      </tr> 
      {{/if}} 
     {{/each}} 
    </table> 
</script> 

樣品在這裏：http://jsfiddle.net/rniemeyer/5naAL/

Answer 2

試試這個：

添加一個名爲過程數據的新功能按摩輸入數組，並添加一個新的模板來渲染單元，如下所示：

工作例如@http://jsfiddle.net/Cjqr9/

<script type="text/javascript"> 
    var data = 
    { 
     "Table" : 
     [ 
      { 
       "CompanyName" : "Company1", 
       "Title" : "xxx", 
       "URL" : "http://www.xyz.com", 
       "FileNameStatus" : "active" 
      }, 
      { 
       "CompanyName" : "Company2", 
       "Title" : "xxx", 
       "URL" : "http://www.xyz1.com", 
       "FileNameStatus" : "inactive" 
        ] 
    }; 

    $(function(){ 
     processData(data.Table); 
     $("#tableTemplate").tmpl(processData(data.Table)).appendTo("#tblid"); 
    }); 

    function processData(data){ 
     var delta = 5 - data.length%5; 
     while(delta > 0){ 
      data.push({}); 
      delta--; 
     } 
     var arr = null; 
     var retArr = []; 
     $.each(data, function(i, item){ 
      if(i%5 == 0){ 
       arr = []; 
       retArr.push(arr); 
      } 
      arr.push(item); 
     }); 
     return retArr; 
    } 
    </script> 

    <script id="tableTemplate" type="text/x-jquery-tmpl">      
     <tr>   
      {{tmpl($data) "#cellTemplate"}} 
     </tr>  
    </script> 

    <script id="cellTemplate" type="text/x-jquery-tmpl"> 
     {{if URL}} 
     <td>     
       <a href="${URL}" target="_blank">    
        <img src="${FileNameStatus}.jpg" title="${Title}" /> 
        ${$item.parent.indexOf($item.data)} 
       </a>        
     </td>  
     {{else}} 
      <td/> 
     {{/if}} 
    </script> 
    <div id="rightWrapper"> 
     <table id="tblid"> 
     </table> 
    </div> 

Answer 3

這是最簡單的解決方案（除非我誤解了某些內容）。 jquery-tmpl自動循環對象/數組，所以你不需要事先處理數據。我的例子只有3列，但你可以很容易地添加2個更多的<td> s與你想要的任何數據。

<script> 
var data = 
    { 
     "Table" : 
     [ 
      { 
       "CompanyName" : "Company1", 
       "Title" : "xxx", 
       "URL" : "http://www.xyz.com", 
       "FileNameStatus" : "active" 
      }, 
      { 
       "CompanyName" : "Company2", 
       "Title" : "xxx", 
       "URL" : "http://www.xyz1.com", 
       "FileNameStatus" : "inactive" 
      }, 
      { 
       "CompanyName" : "Company1", 
       "Title" : "xxx", 
       "URL" : "http://www.xyz.com", 
       "FileNameStatus" : "active" 
      } 
     ] 
    }; 

$(function(){ 
    $("#tableTemplate").tmpl(data.Table).appendTo("#tblid"); 
}); 
</script> 

<script id="tableTemplate" type="text/x-jquery-tmpl"> 
    <tr>  
     <td>     
      <a href="${URL}" target="_blank">    
       <img src="${FileNameStatus}.jpg" title="${Title}" /> 
      </a> 
     </td> 
     <td> 
      ${CompanyName} 
     </td> 
     <td> 
      ${Title} 
     </td> 
    </tr> 
</script> 

<div id="rightWrapper"> 
    <table id="tblid"> 
    </table> 
</div> 

工作實施例：http://jsfiddle.net/qYgrZ/