Кнопки строки ролловера с SlickGrid

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

http://grooveshark.com/#/popular

Кнопки «Воспроизвести» и «Параметры» становятся видимыми только при наведении курсора мыши на строку.

Реализованное мной решение выглядит так:

  $(".slick-row").hover(
    function () {
      $(this).find(".deletelink").css({"visibility": "visible"});          
    },
    function () {
      $(this).find(".deletelink").css({ "visibility": "hidden" });
    }
  );

Это работает, но это самый простой / рекомендуемый способ сделать это? Я новичок в SlickGrid, и я все еще не уверен, как взаимодействовать с сеткой, когда встроенные методы не дают мне того, что мне нужно.

Хорошая идея - манипулировать элементами SlickGrid, например. $ (". slick-row") с помощью jQuery? Или есть способ лучше?

РЕДАКТИРОВАТЬ: Я обнаружил небольшую проблему с моим методом. При прокрутке сетки вверх и вниз на пару экранов функция переключения теряется. Предположительно потому, что SlickGrid уничтожает и воссоздает строки таблицы. Возможно, я смогу решить эту проблему с помощью живых событий. Опять же, это хорошее решение или есть лучший способ подойти к такого рода проблемам?


person njr101    schedule 24.08.2011    source источник


Ответы (1)


Используйте это вместо

$('.slick-row').live('mouseover mouseout', function (event) {
        if (event.type == 'mouseover') {
            $(this).find(".deletelink").css({"visibility": "visible"}); 
        } else {

             $(this).find(".deletelink").css({ "visibility": "hidden" });
        }
    });

здесь отлично работает, даже после прокрутки сетки вверх и вниз пару раз

person G-Man    schedule 25.05.2012