jquery - 如何使用jquery模板Json响应构建5列表

Question

下面是我的 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/