Сетка, созданная с помощью шаблона JQuery, должна быть сброшена с помощью Ajax, не работает - PullRequest
0 голосов
/ 19 августа 2011

Иногда работает, а иногда нет.

Я пытаюсь создать Grid с помощью JQuery Template через Ajax после добавления или удаления записи.В js файле

$('.gridRow').remove();

не работает должным образом. Кто-то подскажет, как сбросить сетку, чтобы снова ее заполнить .Ниже приведен код.

Файл JS

var ReloadGrid = (function(){
            $.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
                $('.gridRow').remove();
                (data.length <= 0) ? $("#gridBtn").hide() : $("#gridBtn").show();
                for (var i=0; i<data.length; i++) { data[i].num = i+1; }
                $('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
            });
 });

на странице MVC3 cxhtml

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="cellTd ">
            <input type="checkbox" id="deleteCb" />
            <input type="hidden" id="Id_ + ${num}" class="idField" value="${Id}" />
        </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}</td>
        <td class="cellTd ">
            <input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
        </td>
    </tr>

</script>

<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tbody>
        <tr class="gridTitleRow">
            <td class="iconLink width36">Delete</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>
</div>

1 Ответ

1 голос
/ 20 августа 2011

Обычно я очищаю упаковку вместо строки.

$('table.gridTable > tbody').empty();

Но для того, чтобы это работало, вам нужно изменить таблицу на thead

<table class="gridTable" cellspacing="0" cellpadding="0">
    <thead>
        <tr class="gridTitleRow">
            <th class="iconLink width36">Delete</th>
            <th class="iconLink width60">Sort Order</th>
            <th class="iconLink widthAuto">Display Name</th>
            <th class="iconLink widthAuto">Url Name</th>
            <th class="iconLink widthAuto">Active</th>
        </tr>
    <thead>
    <tbody>
    </tbody>
</table>
...