カテゴリー: JavaScript

jqGrid グループヘッダー

投稿日: 投稿者:

列タイトルを2行にしてグループにする方法

[ コードサンプル ]


        // ==== グループヘッダー ==== //
        $("#pcsum").jqGrid('setGroupHeaders', {
          useColSpanStyle: true,
          groupHeaders: [
            {startColumnName: 'tgtarv', numberOfColumns: 5, titleText: 'Target'},
            {startColumnName: 'resarv', numberOfColumns: 5, titleText: 'Response'},
            {startColumnName: 'costarv', numberOfColumns: 5, titleText: 'Cost (s)'},
            {startColumnName: 'totaltgt', numberOfColumns: 3, titleText: 'Total'}
          ]
        });

画面例

jqGrid ツールバーにリフレッシュボタンを配置

投稿日: 投稿者:

頻繁に最新状況を見たい時とか、既定ではリフレッシュボタンが下にだけあるので、スクロールするのが面倒くさいので、上にもあると便利なので、つけるコードです。

[ コードサンプル ]


            // リフレッシュボタンを付ける //         
            var TOOLBAR_REFRESH_DIV = "<div style='float:right;margin-right:16px;' id='tbarrefreshpc'>";
            var TOOLBAR_REFRESH_BTN = "<span class='ui-icon ui-icon-refresh curpo' id='tbarrefreshbtnpc'></span>";
            $('#t_pctgt').append(TOOLBAR_REFRESH_DIV);
            $('#tbarrefreshpc').html(TOOLBAR_REFRESH_BTN);
            $('#tbarrefreshpc').attr('title', $('#refresh_pctgt').attr('title'));
            // ナビゲーションバーのボタンクリックを発生させる //
            $('#tbarrefreshbtnpc').on('click', function () {
              $('#refresh_pctgt').click();
            });

[ 画面例 ]

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));
          }


        });

Numeral.js が使える場面

投稿日: 投稿者:

jqGrid の colModel でしてるスタティックな設定が、全データで通用すれば、使う必要ありませんが、データ値によって表現を変える場合、他の列値の状態により、フォーマットを変える必要ある場合に使えます。

[ コードサンプル ]


// 確定数量をフォーマット //
if (rows[i]['wtFixed'] != '0.0') {
  $('#shpgrid').jqGrid('setCell', tmpid, 'wtFixed', numeral(rows[i]['wtFixed']).format('0,0.000'));
}

if (trmdtxt.indexOf(".") > 0) {
  if (j == WT_FIXED_COLUMN_INDEX) {
    $(this).text(numeral(trmdtxt).format('0,0.000'));
  }
  else {
    $(this).text(numeral(trmdtxt).format('0,0.00'));
  }
}

公式ページ

tippy 使い方

投稿日: 投稿者:

 

 

 

 

表示したいテキストを title属性にセット


 <input type="text" name="dcnm" id="dcnm" value="${dcnmfst}" placeholder="Discharging port name"
                       class="menuitm" title="Input a discharging port name"/>

tippyが現れるようにする


              tippy('.tmptippy', {      // 表示対象
                placement: 'bottom',    // 表示位置
                animation: 'scale',     // アニメーション指定
                duration: 1000,         // 表示遅延
                arrow: true,           // 矢印有無」 
              });