Я пытаюсь добавить строку в таблицу и сделать так, чтобы эта строка скользила в поле зрения, однако функция слайдера, кажется, добавляет стиль display: block к строке таблицы, которая портит макет.
Есть идеи, как обойти это?
Вот код:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
fadeInиfadeOutработайте над строками таблицы иОтветы:
Анимации не поддерживаются в строках таблицы.
Из "Обучения jQuery" Чеффера и Сведберга
Вы можете обернуть содержимое td в div и использовать слайддон на этом. Вам нужно решить, стоит ли анимация дополнительной разметки.
источник
$('tr').find('td').animate({padding: '0px'}, {duration: 200});Я просто обертываю tr динамически, затем удаляю его, когда слайд-слайд / слайд-нон завершен. Это довольно небольшие затраты на добавление и удаление одного или нескольких тегов, а затем их удаление после завершения анимации. Я не вижу никаких видимых задержек при этом.
SlideUp :
Скользить вниз:
Я должен отдать дань уважения fletchzone.com, когда я взял его плагин и снял его с себя, приятель.
источник
Вот плагин, который я написал для этого, он берет немного от реализации Fletch, но мой используется исключительно для скольжения строки вверх или вниз (без вставки строк).
Основное использование:
Передайте параметры слайда как отдельные аргументы:
По сути, для анимации скольжения плагин оборачивает содержимое ячеек в DIV, анимирует их, затем удаляет их и наоборот для слайда вверх (с некоторыми дополнительными шагами, чтобы избавиться от заполнения ячеек). Он также возвращает объект, для которого вы его вызвали, так что вы можете связать методы следующим образом:
Надеюсь, это кому-нибудь поможет.
источник
Вы можете попробовать обернуть содержимое строки в a
<span>и сделать так, чтобы ваш селектор$('#detailed_edit_row span');был немного хакерским, но я просто проверил его, и он работает. Я также попробовалtable-rowпредложение выше, и оно, похоже, не сработало.обновление : я играл с этой проблемой, и, судя по всему, jQuery нужен объект, над которым он выполняет slideDown, чтобы быть элементом блока. Так что, без игры в кости. Мне удалось создать таблицу, в которой я использовал slideDown для ячейки, и это никак не повлияло на макет, поэтому я не уверен, как настроена ваша. Я думаю, что ваше единственное решение состоит в том, чтобы реорганизовать таблицу таким образом, чтобы все было нормально, если бы эта ячейка была блоком или просто
.show();чертовой штукой. Удачи.источник
<td><div style="display:block">contents</div></td>Выберите содержимое строки следующим образом:
.contents () - Получить дочерние элементы каждого элемента в наборе соответствующих элементов, включая узлы текста и комментариев.
источник
$('tr > td').contents().slideDown(). Убедитесь, что весь контент внутри столбца заключен в тег, т. Е. Не<td>Some text</td>будет работать. Это самое простое решение.Я немного отстал от ответа на этот вопрос, но я нашел способ сделать это :)
Я просто поместил элемент div в теги данных таблицы. когда он становится видимым, когда div расширяется, весь ряд опускается. затем скажите, чтобы он постепенно уменьшался (затем тайм-аут, чтобы вы увидели эффект), прежде чем снова скрывать строку таблицы :)
Надеюсь, это поможет кому-то!
источник
Мне понадобилась таблица со скрытыми строками, которые скользят в и из поля зрения при щелчке строк.
Показать фрагмент кода
источник
Есть строка таблицы с вложенной таблицей:
Чтобы скользить вниз по строке:
Примечание: строка и ее содержимое (здесь оно есть
"table") должны быть скрыты до начала анимации.Чтобы сдвинуть строку вверх :
Второй параметр (
function()) является обратным вызовом.Просто!!
Обратите внимание, что есть также несколько опций, которые могут быть добавлены в качестве параметров функций перемещения вверх / вниз (наиболее распространенными являются длительности
'slow'и'fast').источник
Я обошел это, используя элементы td в строке:
Анимация самой строки вызывает странное поведение, в основном проблемы с асинхронной анимацией.
Для приведенного выше кода я выделяю строку, которая перетаскивается в таблице, чтобы подчеркнуть, что обновление прошло успешно. Надеюсь, это кому-нибудь поможет.
источник
effect is not a functionЯ использовал представленные здесь идеи и столкнулся с некоторыми проблемами. Я исправил их все и получил плавную однострочку, которой хотел бы поделиться.
Он использует CSS на элементе TD. Уменьшает высоту до 0px. Таким образом, имеет значение только высота содержимого вновь созданной div-оболочки внутри каждого элемента td.
Слайд медленно включается Если вы сделаете это еще медленнее, вы можете заметить некоторый сбой. Небольшой прыжок в начале. Это из-за упомянутой настройки CSS. Но без этих настроек высота строки не уменьшится. Только его содержание будет.
В конце элемент tr удаляется.
Вся строка содержит только JQuery и не содержит нативного Javascript.
Надеюсь, поможет.
Вот пример кода:
источник
Я хочу скользить по всему телу, и я справился с этой проблемой, комбинируя эффекты затухания и скольжения.
Я сделал это в 3 этапа (2-й и 3-й этапы заменяются в случае, если вы хотите скользить вниз или вверх)
Пример слайда:
источник
У меня были проблемы со всеми другими предлагаемыми решениями, но в итоге я сделал эту простую вещь, гладкую, как масло.
Настройте свой HTML следующим образом:
Затем настройте свой JavaScript следующим образом:
По сути, сделайте «невидимую» строку высотой 0px с div внутри.
Используйте анимацию в div (не в строке), а затем установите высоту строки в 1px.
Чтобы снова скрыть строку, используйте противоположную анимацию на элементе div и установите высоту строки обратно в 0px.
источник
Мне понравился плагин, который Винни написал и использовал. Но в случае таблиц внутри скользящей строки (tr / td) строки вложенной таблицы всегда скрыты даже после перемещения вверх. Поэтому я быстро и просто взломал плагин, чтобы не скрывать строки вложенной таблицы. Просто измените следующую строку
в
который находит только непосредственные tds, а не вложенные. Надеюсь, что это помогает кому-то использовать плагин и иметь вложенные таблицы.
источник
Я хотел бы добавить комментарий к сообщению # Vinny, но у меня нет представителя, поэтому нужно публиковать ответ ...
Обнаружена ошибка в вашем плагине - когда вы просто передаете объект с аргументами, они перезаписываются, если другие аргументы не передаются. Легко решаются путем изменения порядка обработки аргументов, код приведен ниже. Я также добавил опцию для уничтожения строки после закрытия (только потому, что мне это было нужно!): $ ('# Row_id'). SlideRow ('up', true); // уничтожаем строку
источник
Если вам нужно одновременно скользить и исчезать в строке таблицы, попробуйте использовать это:
источник
Вы можете использовать эти методы, как:
источник
Я могу сделать, если вы установите td's в строке, чтобы не отображать ни одного, в то время как вы начинаете анимировать высоту в строке
источник
Этот код работает!
источник
http://jsfiddle.net/PvwfK/136/
});
источник
Плагин, предложенный Винни, очень близок, но я нашел и исправил пару небольших проблем.
Для ячеек таблицы с большим количеством содержимого (например, для вложенной таблицы с большим количеством строк), вызывающий slideRow ('up'), независимо от предоставленного значения slideSpeed, он свернет представление строки, как только будет выполнена анимация заполнения. , Я исправил это так, что анимация заполнения не срабатывает до тех пор, пока не будет выполнен метод slideUp () для переноса.
источник
Быстро / легко исправить:
Используйте JQuery .toggle () чтобы показать / скрыть строки по щелчку строки или привязки.
Необходимо будет написать функцию, чтобы идентифицировать строки, которые вы хотели бы скрыть, но переключение создает функциональность, которую вы ищете.
источник