Проблема заполнения таблицы JQuery. Нужна помощь - PullRequest
Новая
       3

Проблема заполнения таблицы JQuery. Нужна помощь

0 голосов
/ 12 июня 2011

У меня есть данные таблицы, поступающие из БД с использованием $ .ajax. Данные не заполняются правильно. Может кто-нибудь, пожалуйста, исправьте код.

Это в файле JavaScript 

var ReloadGrid = (function(){
            $.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
                $( "#gridTemplate" ).tmpl(data).appendTo( "#mytemp" );
            });
 });

Ниже на странице бритвы mvc3. Проблема в том, что «mytemp» не заполняется, а показывает столбцы в верхней части заголовка, возвращающие 3 строки. num ++ не работает, не знаю, где его инициализировать, требуется как счетчик. 

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="numberingTd">
            var num = 1;
            num = num++

        </td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
        </td>
        <td class="cellTd">${DisplayName}</td>
        <td class="cellTd ">${UrlName} Us</td>
        <td class="cellTd ">${Active}</td>
    </tr>

</script>

<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tr class="gridTitleRow">
        <td class="numberingTd width36">&nbsp;</td>

        <td class="iconLink width60">Sort Order</td>
        <td class="iconLink widthAuto">Display Name</td>
        <td class="iconLink widthAuto">Url Name</td>
        <td class="iconLink widthAuto">Active</td>
    </tr>
    <span id="mytemp" ></span>
</table>
</div>

Ответы [ 4 ]

2 голосов
/ 13 июня 2011

Я не уверен, как выглядит объект data, но вам нужно добавить свойство num для каждого элемента.Предполагая, что data является массивом объектов, тогда должно работать что-то вроде этого: 

$.getJSON('/HeaderMenu/GetHeaderGrid', function(data)
{
    for (var i=0; i<data.length; i++)
    {
        data[i].num = i;
    }

    $('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
});

Как указало @Cory, у вас не должно быть <span> в середине таблицы.Используйте <tbody>. 

<table class="gridTable" cellspacing="0" cellpadding="0">
    <tbody>
        <tr class="gridTitleRow">
            <td class="numberingTd width36">&nbsp;</td>
            <td class="iconLink width60">Sort Order</td>
            <td class="iconLink widthAuto">Display Name</td>
            <td class="iconLink widthAuto">Url Name</td>
            <td class="iconLink widthAuto">Active</td>
        </tr>
    </tbody>
</table>
0 голосов
/ 31 декабря 2011

JQuery Шаблоны для спасения ... встроенный функционал для этой самой вещи! 

${$index + 1}
0 голосов
/ 13 июня 2011

Вы можете передать функцию в качестве опции шаблона: 

$('#gridTemplate').tmpl(jsonData, {
        getIndex: function () {
            return $.inArray(this.data, jsonData);
     }
}).appendTo( ".gridTable tbody" );

А потом в вашем шаблоне: 

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="numberingTd">${this.getIndex()}</td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
        </td>
        <td class="cellTd">${DisplayName}</td>
        <td class="cellTd ">${UrlName} Us</td>
        <td class="cellTd ">${Active}</td>
    </tr>
</script>
0 голосов
/ 12 июня 2011

Попробуйте передать значение num вместо того, чтобы устанавливать его в шаблоне.

Кроме того, у вас не должно быть span в середине вашего table.Вместо этого используйте тег tbody. 

var ReloadGrid = (function(){
            $.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
                data.num = $('#mytemp tr').length + 1;
                $( "#gridTemplate" ).tmpl(data).appendTo( "#mytemp" );
            });
 });
...