今回はWijmoでチェックボックスを実装する際によく使われそうな
Selectorに関連する情報です。
Selectorを使うと、表内にチェックボックス列を簡単に実装できます。
ただ、このSelectorのチェックボックスはRowsのisSelectedという
プロパティと連動しているそうで、チェックを付けるとその行を
「選択した」という扱いになります。
↑でわざと強調したのは、選択というフレーズが重要だからです。
SelectionChangedイベント
SelectionChangedは文字通り、「選択が変わったら」です。
要は選択しているセルが変更されたらこのイベントが走ります。
チェックボックスをクリックすると、アクティブセルは変わらないのに
行を選択したという扱いになって、SelectionChangedが走ってしまうのです。
なんか違和感ありますよね。
というわけで
SelectionChangedを実行しない方法
これをやりたいと思ってからほぼ丸一日デバッグし続けて
やっと答えに辿り着きました。。。
これで誰かを救えるなら。。。はい、本題書きます。
チェックボックスONでSelectionChangedが実行されるのはしかたない
矛盾しているようですが、これはもう諦めてください!
いろいろ試しましたが、挙動がおかしくなるだけで何も良いことがありません。
肝心なのは、SelectionChangedの中身が実行されなければ良いということ。
そう、SelectionChangedの先頭でキャンセルという技があります!
SelectionChangedイベントは動くけど、直ぐに処理を中断する
これがポイントです。
方法は簡単です。
チェックボックスによるイベント発火であれば、処理を中断する。
という条件を足せば良いのです。
theGrid.selectionChanged.addHandler(function (s, e) {
if (checkboxによるイベント発火だったら) {
// キャンセルプロパティをtrueにして返すと、このイベントをキャンセル
return e.cancel = true;
}
});
if文の条件式を日本語で書いたのは、ここにもポイントがあるからです!
isSelectedによる行選択は選択列が-1になる
通常、selectionChangedが発生した際に取得される選択列は0以上となります。
表の列定義が最初0から始まる為です。
なので、この選択列を見て「-1」だったら、セルを選択されたのではなく
行を選択されたのだと判断できるわけです。
さっきのコードを完成させると以下のようになります。
theGrid.selectionChanged.addHandler(function (s, e) {
if (e.col < 0) { // チェックボックスによるイベントだと -1 がくる
// キャンセルプロパティをtrueにして返すと、このイベントをキャンセル
return e.cancel = true;
}
... 他の処理
});
時には諦めが肝心ということ
この解決策に辿り着くまで、Selectorのprototypeメソッドをオーバーライドしたり
試行錯誤を繰り返しました。。。
時にはゴリ押しするのではなく、ある程度流れに身を任せた上で
工夫をすることで体力を消耗しなくていいという。。。当然ですね!