当您将鼠标悬停在剑道网格上的一行上时,是否可以添加链接或按钮?我查看了文档并用谷歌搜索了一下,但我找不到任何东西。我不确定我是否只需要让我的行模板能够根据悬停来显示/隐藏我的按钮/链接,或者剑道网格是否有开箱即用的东西可以让这变得更容易。有什么想法吗?提前致谢。
最佳答案
没有什么是开箱即用的,但你几乎可以做所有事情。
假设您想要显示一个标准按钮(例如:edit
或 destroy
)。那么你的列定义是这样的:
columns : [
{ command: [ "edit", "destroy" ] },
// Other column definition
...
]
下一步是隐藏由 grid
标识的网格内的每个按钮。
#grid .k-button {
visibility: hidden;
}
然后添加一个新样式,使其在鼠标悬停在其上时可见:
#grid .k-button.showme {
visibility: visible;
}
最后,我们必须添加一些处理代码来控制鼠标何时位于该行上。这是棘手的部分:
- 这不能通过 CSS 完成(即使用 :hover),因为我们想要控制鼠标何时位于行上,但我们想要更改(添加 CSS 类)到按钮。
- 由于网格可能会重绘(当您排序、分页等时),我们需要使用
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/ )是一个运行示例。
关于javascript - 将鼠标悬停在剑道网格上添加新按钮/链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16727812/