5

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

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

4

3 回答 3

6

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

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

<script id="trTemplate" type="text/x-jquery-tmpl">
       <tr>
            {{each $data}}
                 <td>${Col}</td>
            {{/each}}
       </tr>
</script>
于 2011-02-19T14:22:49.843 回答
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));

jsfile上的示例

于 2011-02-19T14:28:57.607 回答
1

看看这个

 <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>
于 2011-02-19T14:25:20.477 回答