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 クラスを追加) したいので、CSS 経由 (つまり、:hover を使用) では実行できません。
  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 に答える