添加新的按钮/链接悬停在剑道网格上

add new button / links on hover over on kendo grid

本文关键字：网格 悬停 链接 按钮 添加      更新时间：2023-09-26

是否有办法添加链接或按钮，当你悬停在一行上的剑道网格?我查看了文档并在谷歌上搜索了一下，但我找不到任何东西。我不确定是否我只需要有我的行模板能够显示/隐藏我的按钮/链接基于悬停或如果剑道网格有开箱外的东西，这将使这更容易。任何想法吗?

没有现成的东西，但你几乎可以做任何事情。

假设您想要显示一个标准按钮(例如:edit或destroy)。然后你的列定义是这样的:

columns   : [
    { command: [ "edit", "destroy" ] },
    // Other column definition
    ...
]

下一步是隐藏每个按钮在这个网格由grid识别。

#grid .k-button {
    visibility: hidden;
}

然后添加一个新样式，使鼠标在其上时可见:

#grid .k-button.showme {
    visibility: visible;
}

最后，我们必须添加一些处理代码来控制鼠标何时在行上。这是比较棘手的部分:

  1. 它不能通过CSS(即使用:hover)来完成，因为我们想控制鼠标何时在行上，但我们想改变(添加CSS类)按钮。
  2. 由于网格可能被重新绘制(当你排序，分页，…)，我们需要使用live事件处理程序。

我们所做的是当鼠标进入一行时，我们添加showme类(使按钮可见)。

$(grid.tbody).on("mouseenter", "tr", function (e) {
    $(".k-button", e.currentTarget).addClass("showme");
});

当鼠标退出行时，我们移除showme类。

$(grid.tbody).on("mouseleave", "tr", function (e) {
    console.log("exit");
    $(".k-button", e.currentTarget).removeClass("showme");
});

这里(http://jsfiddle.net/OnaBai/BjuVr/)有一个运行的例子

相关文章：