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

ProgramBox

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

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#jquery #asp.net-mvc-3 #jquery-templates

#jquery #asp.net-mvc-3 #jquery-шаблоны

Вопрос:

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

Это в файле javascript

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

Ниже приведена страница razor 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">amp;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>

1. Что именно должен делать этот счетчик? На самом деле вы его нигде не используете, просто объявляете, инициализируете, немедленно увеличиваете, а затем присваиваете его самому себе (что, безусловно, неправильно).

2. @Мэтт Болл, на самом деле я просто тестировал это. Мне нужен счетчик и его значение, чтобы сделать элементы уникальными. Прошу прощения, что не почистил код перед публикацией.

3. Шаблоны действительно не должны содержать логики — сделайте их как можно более тупыми. Поместите число в данные, которые передаются в .tmpl() .

4. @matt-ball, понял. Проблема, которую показал @Cory Gagliardi, заключается в том, что в таблице не отображается значение $ {num}. Любая помощь.

Ответ №1:

Я не уверен, как выглядит 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">amp;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>

Ответ №2:

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

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

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

1. Ваш ответ идеален. Все работает, за исключением того, что переданное числовое значение не отображается. Я показываю это как $ {num}, но ничего не отображается.

2. Помогите мне, пожалуйста. $ {num} ничего не отображает.

3. Это потому, что это не для каждой строки, а для одного поля

Ответ №3:

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

 $('#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>

Ответ №4:

На помощь приходят шаблоны jQuery … встроенная функциональность для выполнения именно этого!

 ${$index   1}