投稿者: Hisa

たくさんのグリッドを配置したページでは、あまり見ないのは折り畳んでおくとすっきりしますが、次回使う時、開いた状態で始まるとわかりにくく、使いにくいので、ローカルストレージに保存して前回最終折り畳み状態を再現できるようにします。

[ コードサンプル ]

      //  各グリッド折り畳み状態 //
      /* キーはグリッドid, hiddngid が true or false 既定は全部trueで折り畳み   */
      var gdhiddenMap = {delayskip: true, pctgt: true, pchst: true, mtapi: true, usradd: true, tgtbps: true,
        tableschemalist: true, tableloglist: true, batlog: true,
        pcsum: true, apidoc: true, pcncann: true, svpdsterr: true, polydel: true, polyfacildel: true,
        bareaupdt: true, actcy: true};
        
      // ローカルストレージから読む //
      if (localStorage) {
        if (localStorage.getItem('vesselsch_gdstate_logshow') != null) {
          var hdnmap = JSON.parse(localStorage.getItem('vesselsch_gdstate_logshow'));
          /*for (key in gdhiddenMap) {
           if (hdnmap[key] !== undefined) {
           gdhiddenMap[key] = hdnmap[key];
           }
           }*/
          // これでも出来るが、あまり変わりないような //
          $.map(gdhiddenMap, function (value, index) {
            if (hdnmap[index] !== undefined) {
              gdhiddenMap[index] = hdnmap[index];
            }
          });
        }
      }
      
      
      /* jgGrid プロパティ設定 */
      hiddengrid: gdhiddenMap['delayskip'], // 折り畳み
      	
      /* jqGrid onHeaderClick イベントでローカルストレージに保存する */
      // -- 折り畳みを変えた時 -- //
          onHeaderClick: function () {
            var gdstate = $(this).jqGrid('getGridParam', 'gridstate');
            var thisid = $(this).attr('id');
            gdhiddenMap[thisid] = gdstate == 'hidden';
            localStorage.setItem('vesselsch_gdstate_logshow', JSON.stringify(gdhiddenMap));
          },	

Chromeの開発ツールで状態をチェックする

loadCompleteで行走査して、指定列番セルにhtmlで設定してます。

const var ANCH_SPAN = '<span style="margin-left:4px"/><img src="Img/port.png" /></span>';

              // 国旗 //
              // tdのセット //
              td = $('#' + rows[i]['id']).children('td').eq(FLG_COLIDX);
              if (rows[i]['cdCntry'] != '') {
                $(td).html(
                        '<span style="margin-left:2px"/><img src="Img/flag/' + rows[i]['cdCntry'] + '.gif" /></span>')
              }
              else if (rows[i]['lastpcres'].indexOf(' ANCH ') != -1) {
                $(td).html(ANCH_SPAN);
              }
              else {
                $.each(ANCH_ARY, function (j, itm) {
                  if (rows[i]['lastpcres'].indexOf(itm) != -1) {
                    $(td).html(ANCH_SPAN);
                  }
                });
              }

              // 入出港アイコン //
              td = $('#' + rows[i]['id'] + ' td').eq(ARVDEP_COLIDX);
              if (rows[i]['lastpcres'] != '') {
                $(td).html('<span style="margin-left:4px;margin-right:4px;"><img src="Img/ope/' +
                        (rows[i]['lastpcres'].slice(0, 3)) + '.png"/></span>');
              }

・動的設定はhidden列でしてる
・htmlが長くなるのはconstでセットするとよい

< 画面例 >

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート【電子書籍】[ 矢次 悟郎 ] 価格：2640円 (2023/1/16時点) 楽天で購入

列タイトルを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'}
          ]
        });

画面例

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

[ コードサンプル ]

            // リフレッシュボタンを付ける //         
            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();
            });

[ 画面例 ]

gridCompleteに書いておきます。

[ コードサンプル ]

var reccnt = $(this).jqGrid("getGridParam", "records");
// タイトル //
$(this).jqGrid('setCaption', "MarineTraffic Port-call Target List  X " + reccnt + totaltxt);

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


        });