jqGridのフィルタリング条件を保持する

どうも、ishida(@kojiisd)です。

今回はjqGridで利用できる「navGrid」のフィルタ機能のとある利用方法について書きます。

jqGridを使っていると、こんなこと思いますよね？
・フィルタリングの条件を保持したままサーバサイドとか処理できないかな？
　→フィルタリングの条件を保持できないか？
思いますよね？？？ですので、実装です。

今回はバージョン3.8.2を使って上記要件を実現します。
＃なぜ4.3.1の最新版でやらないのかは後で記載します。

フィルタ機能のおさらい

jqGridで利用できるnavGridのフィルタリングが何者かというと、
テーブルの下に出せるアイコンをクリックすると出現する、アイツです。

こんなコードがサンプルにも書いてあると思いますが、これで実現してます。

$("#sample1").jqGrid('navGrid','#pager1',{ 
  add:false, edit:false, del:false, search:true},
{}, {}, {}, {multipleSearch: true}});

やりたいことは何か？

要は、ここで検索した文字列や条件を保持しておいて、他で使いたい、ということです。
→例えば、その値を保持しておいて、サーバサイドに処理が飛んだ後でもフィルタを
　保ったまま画面表示したい、とかね。

これを実現してみましょう。

結果

こうやって実現できます。

{multipleSearch: true,
  beforeShowSearch: function(form){
    $('.ui-search',form).click(function(){
      var filters = $('#sample1').jqGrid('getGridParam', 'postData');
      $('#filters').val(filters.filters);
    });
  }
});

これでHTML内に記述しておくid=filtersタグに値を保持することが可能です。
見てわかる通り、「beforeShowSearch」に対して処理を記述することで、
「フィルタダイアログを出現する前に」「onclick処理を検索ボタンに設置」することができます。
＃".ui-search"は検索ボタンのクラスを表しています。

どんな仕組み？

jqGridはパラメータとしてpostDataというものを持ちます。
これは名前の通りデータをポストする際の中身です。
フィルタ処理の場合には、このpostDataの中にfiltersという変数を持つことになります。
IEなどの開発者ツールやFFのfirebugを使って処理を止めると、
こんなオブジェクトを見ることができるはずです。

このfilters.filters(String)を一時的に保存しているのが以下になります。

$('#filters').val(filters.filters);

こうやってhiddenにでも入れてしまえば、あとはサーバサイドで使うなり、
他から別途フィルタリングをしたりなど、やりたい放題です。

なぜこんな保持の仕方をする？

確かに文字列のみを保持することもできますが、jqGridで用意されているnavGridは、
様々な要素を持つことが可能です。
例）複数の文字列でのフィルタリング、複数の列でのフィルタリング。。。

これらが全てfiltersに文字列で並んでいるので、今回のようにfiltersで保持することを選択しています。
＃その方が良いと私は思っています。

結局何ができるようになるのかわからん！

という方のために、一応例を載せておきます。
下記は保持したfilters.filtersを再度JSONにパースして、外側から
フィルタリング機能を実現しているものです。

function search() {
  if ($('#filters').val() == ""){
    return;
  }
  $('#sample1').jqGrid('setGridParam',{search: true, postData : {"filters": $.parseJSON($('#filters').val())}});
  ]$('#sample1').trigger("reloadGrid");
}

一度検索をしてfiltersに値が入っていれば、このsearchメソッドを使うことで
外側から同じ検索をすることが可能になります。
ポイントはsetGridParamを利用して再度filtersを設定していることでしょうか？
これができれば、例えばサーバサイドで作成した条件を動的に
postDataとして当てはめることもできます。

皆さんもぜひ試してみてください。

結局3.8.2でやった理由って？

っと、忘れるところでした。実は今まで書いてきたこと、4.3.1では動きませんでした。
beforeShowSearchが反応しないですね。
回避方法など分かったらまた記載しようと思います。

では。