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/

覚えておくべきことの 1 つは、配列をテンプレート関数に渡すと、配列内の各項目に対して自動的に評価されることです。したがって、テンプレートは次のように単純にすることができます。

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

jsfidle の例

于 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 に答える