javascript - 将鼠标悬停在剑道网格上添加新按钮/链接

Question

当您将鼠标悬停在剑道网格上的一行上时，是否可以添加链接或按钮？我查看了文档并用谷歌搜索了一下，但我找不到任何东西。我不确定我是否只需要让我的行模板能够根据悬停来显示/隐藏我的按钮/链接，或者剑道网格是否有开箱即用的东西可以让这变得更容易。有什么想法吗？提前致谢。

Answer 1

没有什么是开箱即用的，但你几乎可以做所有事情。

假设您想要显示一个标准按钮(例如: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/ )是一个运行示例。