使用 SlickGrid 翻转行按钮

发布于 2024-12-01 04:12:35 字数 762 浏览 1 评论 0原文

使用 SlickGrid，我想向每一行添加一个删除按钮。但我只希望当用户将鼠标悬停在该行上时显示该按钮。这里可以看到这种效果的一个很好的例子：

“播放”和“选项”按钮仅在鼠标悬停在行上时才可见。

我实施的解决方案如下所示：

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

它有效，但这是最简单/推荐的方法吗？我是 SlickGrid 的新手，当内置方法不能满足我的需要时，我仍然不确定如何与网格交互。

使用 jQuery 操作 SlickGrid 元素例如 $(".slick-row") 是个好主意吗？或者有更好的方法来做到这一点吗？

编辑：我发现我的方法有一个小问题。当网格上下滚动几个屏幕时，切换功能会丢失。大概是因为 SlickGrid 正在销毁并重新创建表行。我也许可以通过现场活动来解决这个问题。再说一次，这是一个好的解决方案还是有更好的方法来解决此类问题？

原文

Using SlickGrid, I'd like to add a delete button to each row. But I'd only like the button to be displayed when the user hovers over the row. A good example of this effect can be seen here:

http://grooveshark.com/#/popular

The "Play" and "Options" buttons only become visible on row mouseover.

The solution I have implemented looks like this:

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

It works, but is it the easiest/recommended way to do this? I'm new to SlickGrid and I'm still not sure how to interact with the grid when the built in methods don't give me what I need.

Is it a good idea to manipulate the SlickGrid elements e.g. $(".slick-row") using jQuery? Or is there a better way to do this?

EDIT: I have discovered a small problem with my method. When scrolling the grid up and down a couple of screens, the toggle functionality is lost. Presumably because SlickGrid is destroying and recreating the table rows. I may be able to solve this using live events. Again, is this is good solution or is there a better way to approach this sort of problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡紫姑娘！ 2024-12-08 04:12:35

使用它在这里也很有效

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

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

即使在上下滚动网格几次之后，

Use this instead

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

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

works great here , even after scrolling the grid up and down a couple of times

回复收藏 0 原文

~没有更多了~