1

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

4

1 回答 1

3

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

假设您要显示标准按钮（例如：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/）是一个正在运行的例子。

于 2013-05-24T16:14:06.700 回答