使用 jquery 模板插件构建表答案

【问题标题】：build table with jquery template plugin使用 jquery 模板插件构建表
【发布时间】：2011-06-30 09:08:46
【问题描述】：

我感到无助。我想用 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>

我尝试了不同的方法，改变了工作正常的数据源的外观，尝试在没有模板的情况下构建表，但我真的需要知道如何构建具有这样的数据源并使用模板的表？感谢您的帮助。

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

除非我误解了您的需求，否则这里有一个工作示例：http://jsfiddle.net/rniemeyer/cEvJs/

要记住的一点是，如果将数组传递给模板函数，它会自动为数组中的每个项目评估它。因此，您的模板可以很简单：

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

【讨论】：

非常好的解决方案。非常感谢你们的帮助！现在我知道该怎么做了。

【解决方案2】：

看看这个

 <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>

【讨论】：

【解决方案3】：

给定以下模板：

<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 上的示例

【讨论】：