2011-08-24 1 views
1

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 요소를 조작하는 것이 좋습니다. $ (". 매끄러운 줄") jQuery를 사용하여? 아니면 이것을 할 수있는 더 좋은 방법이 있습니까?

편집 : 내 방법에 작은 문제가 있음을 발견했습니다. 화면을 위아래로 스크롤 할 때 토글 기능이 손실됩니다. 아마도 SlickGrid가 테이블 행을 파괴하고 재생성하기 때문입니다. 라이브 이벤트를 사용하여이 문제를 해결할 수 있습니다. 다시 말하지만, 이것이 좋은 해결책입니까 아니면 이런 종류의 문제에 접근하는 더 좋은 방법입니까?

답변

2

사용이 대신

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

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

심지어 그리드를 위로 스크롤 후 시간

몇 아래로, 여기에 좋은 작품