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

Question

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

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/）是一个正在运行的例子。