создать таблицу с плагином шаблона jquery - PullRequest
Новая
       4

создать таблицу с плагином шаблона jquery

5 голосов
/ 19 февраля 2011

Я чувствую себя беспомощным.Я хотел бы построить таблицу с плагином шаблона 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>

Я испробовал разные подходы, изменил внешний вид источника данных, который работает нормально, попытался построить таблицу без шаблона, но ядействительно нужно знать, как построить таблицу с таким источником данных и использованием шаблонов?Спасибо за помощь.

Ответы [ 3 ]

6 голосов
/ 19 февраля 2011

Если я не понимаю ваши потребности, вот рабочий пример: http://jsfiddle.net/rniemeyer/cEvJs/

Следует помнить одну вещь: если вы передаете массив в функцию шаблона, он автоматически оценивает его для каждого элемента в массиве. Итак, ваш шаблон может быть таким простым: 

<script id="trTemplate" type="text/x-jquery-tmpl">
       <tr>
            {{each $data}}
                 <td>${Col}</td>
            {{/each}}
       </tr>
</script>
2 голосов
/ 19 февраля 2011

Имеются следующие шаблоны: 

<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

1 голос
/ 19 февраля 2011

Посмотрите на это 

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