JQuery Slide Up Table Row

Я создаю настраиваемый плагин jQuery, который позволяет пользователю удалять записи внутри таблицы в режиме реального времени, среди многих других. Когда записи удаляются, я хотел бы, чтобы фоновый цвет строки удаленной таблицы загорелся красным цветом, а затем выскользнул из вида.

Вот фрагмент моего кода ниже, который не делает ни одной из изменяющих цвет анимаций, и не скользит вверх по строке. Тем не менее, он удаляет строку, когда предполагается, что анимация слайд-анимации заканчивается. Некоторые вещи, которые нужно знать при просмотре кода ниже:

Переменная "object" является ссылкой jQuery на объект, который был нажат и вызвал операцию удаления.
Объект object.parent(). parent() - это строка, которая удаляется.
Класс CSS "deleteHighlight" содержит цвет, который превратит строку в красный цвет.
Метод "addClass" использует метод jQueryUI "addClass", а не jQuery. Он позволяет анимированный эффект и обратный вызов.

object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

Вот HTML, на котором это выполняется, ничего особенного:

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

Может ли кто-нибудь указать пример того, как я могу это исправить?

Спасибо за ваше время.

Ответ 1

Я подозреваю, что это частично проблема с браузером. Вы не должны нацеливаться на <tr />, поскольку браузеры интерпретируют их по-разному. Кроме того, они ведут себя иначе, чем элементы блока.

В этом примере: http://jsfiddle.net/lnrb0b/3t3Na/1/ ваш код работает частично в хроме. <tr /> разрешен стиль (в отличие от некоторых версий IE), но вы не можете его анимировать. Если вы делаете это display:block, не беспокойтесь, но потом это немного мусор в виде таблицы:)

В этом примере: http://jsfiddle.net/lnrb0b/3t3Na/2/ вы увидите, что я анимировал <td />, но они едва работают и мучительно медленно при этом.

Испытайте их, и я постараюсь подумать о решении тем временем.

Ответ 2

addClass не принимает функцию обратного вызова, так как она выполняется немедленно. Я думаю, вам может понадобиться нечто подобное.

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});

Ответ 3

Самый элегантный способ обработки слайда и удаления состоит в том, чтобы обернуть каждое внутреннее содержимое td с помощью div и одновременно уменьшить заполнение td и высоты div s. Ознакомьтесь с этой простой демонстрацией: http://jsfiddle.net/stamminator/z2fwdLdu/1/

Ответ 4

Конечно, вы можете!

Оберните каждый td из tr, который вы хотите вставить в div, затем переместите те divs!

Конечно, вам нужно анимировать paddings (сверху и снизу) каждого td.

Здесь вы можете найти полный пример здесь:

http://jsfiddle.net/3t3Na/474/

Извлечение исходного кода:

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});

Ответ 5

По какой-то причине wrapInner() с div не работает для меня, поэтому я сделал менее элегантное решение, в котором вы анималируете размер шрифта строки, затем спрячете его, затем восстановите размер шрифта к нормальному, а строка невидима.

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

Я использую это для анимации групп слияния/расширения ресурсов в представлениях календаря fullcalendar.js + scheduler.js.