検索条件設定用のパーツとか、jqGridとは別に上とかに配置してもいいですが、デザイン合わすためのCSSが別に必要になったり、グリッドと連動させて折り畳みとかしようとすると、別にコード書くという煩雑さもあるので、ツールバーの中に入れるのが、すっきりすると思います。
方法としては、2種類あって、
1) jqGridの設定コードの後に書く
2) jqGridのgridCompoleteに書く
にしてます。
[ 後に書くコードサンプル ]
// == ツールバー == //
var htmlds = 'Last Revising Executed Date From ' + "${dtdssel}";
$('#t_delayskip').prepend(htmlds); // 後でリフレッシュボタンを付けてるのでprepend
// == From日を変えた時 == //
$('#dtdssel').on('change', function () {
$('#delayskip').jqGrid('setGridParam', {
serializeGridData: function (postData) {
postData['mindt'] = $('#dtdssel').val();
return postData;
}
}).trigger('reloadGrid');
});
・jqGridのtableのidの前に “t_” がついやのが、ツールバーのid
・${dtdssel}はJSPのpageContextで作ったセレクトタグ
・jQueryのセレクタを使って配置
・日付条件を変えて再検索できる
画面例
// == ツールバー == //
var PCTGT_SEARCH_BUTTON = '' +
'';
var htmlmt = 'Type ' + TP_SEL +
'Add From ' + "${dtpcsel}" +
'Res From ' + "${dtpcselres}" +
' Vessel ' +
"${azselpc}" + ' No Res ' + WITH_NORES_SEL;
$('#t_pctgt').prepend(htmlmt + PCTGT_SEARCH_BUTTON); // 後でリフレッシュボタンを付けてるのでprepend
//$('#t_pctgt').before(htmlmt); // 後でリフレッシュボタンを付けてるのでprepend
$('#pctgtsearchbtn').button();
// == Searchボタンを押した時 == //
$('#pctgtsearchbtn').on('click', function () {
$('#pctgt').jqGrid('setGridParam', {
serializeGridData: function (postData) {
postData['mindt'] = $('#dtpcsel').val();
postData['mindtpcres'] = $('#dtpcselres').val();
postData['hchr'] = $('#azselpc').val();
postData['withnoressel'] = $('#withnoressel').val();
postData['pctgttpsel'] = $('#pctgttpsel').val();
return postData;
}
}).trigger('reloadGrid');
// ローカルストレージに保存 //
if (localStorage) {
var pctgtMap = {};
pctgtMap['mindt'] = $('#dtpcsel').val();
pctgtMap['mindtpcres'] = $('#dtpcselres').val();
pctgtMap['hchr'] = $('#azselpc').val();
pctgtMap['withnoressel'] = $('#withnoressel').val();
pctgtMap['pctgttpsel'] = $('#pctgttpsel').val();
localStorage.setItem('vesselsch_pctgt', JSON.stringify(pctgtMap));
}
});