使用jquery模板插件构建表

Question

我感到无助.我想用jquery模板插件构建一个表,然后用响应中的数据填充表,如下所示:

[
     [
        {Row:0,Col:0},
        {Row:0,Col:1},
        {Row:0,Col:2},
        {Row:0,Col:3},
        {Row:0,Col:4},
        {Row:0,Col:5},
        {Row:0,Col:6}
     ],
     [
        {Row:1,Col:0},
        {Row:1,Col:1},
        {Row:1,Col:2},
        {Row:1,Col:3},
        {Row:1,Col:4},
        {Row:1,Col:5},
        {Row:1,Col:6}
     ]
]

因此该表应该在每行中包含2行和7列.

这是我坚持的代码:

$('#trTemplate').tmpl(result.d).appendTo('#containerTable');

<script id="trTemplate" type="text/x-jquery-tmpl">
    {{each $data}}
        {{if $index < 2}}
            <tr>
                {{tmpl($value) "#tdTemplate"}}
            </tr>
        {{/if}}
    {{/each}}
</script>

<script id="tdTemplate" type="text/x-jquery-tmpl">
    {{each $data}}
        <td>${Col}</td>
    {{/each}}
</script>

<table id="containerTable">
</table>

我尝试了不同的方法,改变了数据源的外观,工作正常,尝试构建没有模板的表,但我真的需要知道如何构建一个具有此类数据源和使用模板的表？谢谢您的帮助.

Answer 1

除非我误解了你的需求,否则这里有一个工作样本:http://jsfiddle.net/rniemeyer/cEvJs/

要记住的一件事是,如果将数组传递给模板函数,它会自动为数组中的每个项目计算它.因此,您的模板可以像下面这样简单:

<script id="trTemplate" type="text/x-jquery-tmpl">
       <tr>
            {{each $data}}
                 <td>${Col}</td>
            {{/each}}
       </tr>
</script>