例えば、start_dateとend_dateみたいな日付項目の2個あるレコードをjqGirdで表示、標準で備わっているモーダルダイアログ型のフォームを出して編集させたい場合
$('#table_id').jqGrid({
/**
(略)
*/
colNames : ['日付1', '日付2', '本文'],
colModel : [
{
name: 'start_date',
index: 'start_date',
width: 100,
jsonmap: 'start_date',
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(e){
setTimeout(function(){
$(e).datepicker({
dateFormat: 'yy-mm-dd'
});
}, 200);
}
},
editrules: {
required: true
}
},
{
name: 'end_date',
index: 'end_date',
width: 100,
jsonmap: 'end_date',
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(e){
setTimeout(function(){
$(e).datepicker({
dateFormat: 'yy-mm-dd'
});
}, 200);
}
},
editrules: {
required: true
}
},
/**
略
*/
}).navGrid('#pager_id', {
add: true,
edit: true,
/**
(略)
*/
},{
/**
(略)
*/
});
のような形で書けば一瞬うまくいったように見えるけど、日付入力させるところで何か挙動がおかしくなる
私が遭遇した具体例はend_dateにフォーカスがあたると、start_dateのdatepickerが出てきていつまでもend_dateが入力できない、特にdatepickerを設定した項目に真っ先にフォーカスがあたるような形でそれが起こる
で、調べてみたのですが
jqgrid multiple datepickers and autofocus
というドンピシャなスレッドを発見
どうやら、navGridのAdd/Editのオプションのところに
{
closeAfterAdd: true,
modal: true,
jqModal: false /** ←コレ */
}
を入れるといいらしい
実際やってみましたが、フォーカスがいきなりdatepicker項目にあたることもなく、2つともちゃんとdatepickerがでてきてくれるようになった