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/

Answer 2

这是最简单的解决方案（除非我误解了某些内容）。 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/

Answer 3

试试这个：

添加一个名为processData的新函数来按摩输入数组并添加一个新模板来渲染单元格，如下所示：

工作示例@ 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>

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

3 个答案: