jqGridでセル(行)選択とダブルクリックを別々に処理したい場合のメモ。
jqGridに限らずjQueryでは通常、クリックとダブルクリックのイベントを両方定義する場合、
クリック
↓
ダブルクリック
の順に処理が実行されます。
ではダブルクリック時に、クリックの処理をしたくないケースではどのようにすれば良いか。
「クリック時の処理はsetTimeoutで処理にWaitを設けて、ダブルクリックをハンドルした際にclearTimeoutでクリックの処理を抜けさせる」
というやり方が多いようですね。
実際に行選択(onSelectRow)とダブルクリック(ondblClickRow)で実装してみます。
行選択ではなくセル選択の場合は、onSelectRowではなくonCellSelectに置き換えてください。
let click_timer = new Array();
let click_num = 0;
$("#gridId").jqGrid({
data: data
,colNames:['列1', '列2']
,colModel:[
{id:'col1', name:'col1', align:'center', width:'100px'}
,{id:'col2', name:'col2', align:'center', width:'100px'}
]
,onSelectRow : function (rowid, status, e) {
let timer = setTimeout(function() {
console.log('クリック時の処理');
}, 250);
click_timer[click_num] = timer;
click_num++;
}
,ondblClickRow:function(rowid, iRow, iCol, e){
click_timer.forEach (function(timer){
clearTimeout(timer);
});
console.log('ダブルクリック時の処理');
}
});
とりあえず動くことは確認できましたが。。。
もっとスマートにできる方法があればコメント欄から教えて頂きたいです。