jQuery Slide Up Таблица Row - PullRequest
Новая
       11

jQuery Slide Up Таблица Row

26 голосов
/ 06 июля 2011

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

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

  1. Переменная «object» - это ссылка jQuery на объект, по которому щелкнули и вызвали операцию удаления.
  2. Объект «.parent (). parent () "object - это строка, которая удаляется.
  3. Класс CSS" deleteHighlight "содержит цвет, который превратит строку в красный цвет.
  4. Класс addClass"Метод использует метод" addClass "в jQueryUI, а не в 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>

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

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

Ответы [ 5 ]

14 голосов
/ 06 июля 2011

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

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

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

Пройдите тестирование, и я постараюсь найти решение.

7 голосов
/ 15 октября 2015

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

4 голосов
/ 06 июля 2011

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

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});
2 голосов
/ 07 января 2017

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

Заверните каждый тд нужного вам слайда в div, затем сдвиньте эти div!

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

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

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();
        });
    });
});
0 голосов
/ 02 июня 2016

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

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

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

...