jQuery UI Selectable で、テーブルの行選択

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

テーブルの行を選択するのに、チェックボックスやラジオボタンを使ってもいいのですが、jQuery UI の Selectable を使うこともできます。

Selectableのデモで出てくるのは、div要素やリスト要素が多いのですが、テーブルに適用する場合はどうしたらいいんでしょうか?
こちらのページを参考にすると、こんな感じかな?

<script type="text/javascript">
<!--
$(function() {
$("tbody.selectable").selectable({filter: 'tr'});
});
// -->
</script>
<style type="text/css">
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
</style>

これで行ごと選択できるようになりました。 複数選択もできるんですよね。
本当は領域外をクリックしたり、ESCキーを押したら、選択を解除してくれるとありがたいんですけどね。

UI Selectable の選択を、Context Menu に渡たすにはどうしたらいいんでしょうかね?