jqGrid ツールバーのカスタマイズ

検索条件設定用のパーツとか、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));
          }


        });

コメントを残す