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>

Answer 2

给出以下模板：

<script id="tmpRow" type="text/x-jquery-tmpl">
    <tr>
        {{each $data}}
          {{tmpl "#tmpCell", this}}
        {{/each}}
    </tr>
</script>

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

您可以使用以下templ调用来构建表。

var $rowTemplate = $("#tmpRow").template("tmpRow");
$("table tbody").append($.tmpl($rowTemplate, data));

jsfidle

上的示例

Answer 3

看看这个

 <script language="javascript" type="text/javascript">
    //__________________Compile Templates ____________________________
    $("#trTemplate").template("trTemplate");

    $(document).ready(function () {
        var data = "[[{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}]]";
        $.tmpl("trTemplate", eval(data)).appendTo("#containerTable");
    });
</script>

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

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

使用jquery模板插件构建表

3 个答案: