ColdFusion 10 + jqGridを使ってみる（その４）

第3回目の記事ではinput項目で入力された値でjqGridをリロードする（検索条件をjqGridに渡して検索する）までを試してみましたが、今回は上段jqGridでクリックされた値を取得して、下段jqGridに値を渡して連動させるまでを試してみます。

まずは前回までのcf10_cfgrid.cfmのサンプルソースに下段jqGrid用のjavascriptを追加します。（56行目あたりに下記javascriptコードを追加します。）

      //下段のjqGridの生成
      $(".jgrid_bottom").jqGrid({
      url:'GetData_sample.cfc?method=getinfo_bottom',
      datatype: 'json',
      mtype: "GET",
      formatter : {
      number : {decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00'}
      },
      colModel :[
      {name:'ID',index:'ID'},
      {name:'F_TIME',index:'F_TIME', align:"left", editable:false},
      {name:'Q1',index:'Q1', align:"right", editable:true},
      {name:'Q2',index:'Q2', align:"right", editable:true},
      {name:'Q3',index:'Q3', align:"right", editable:true},
      {name:'Q4',index:'Q4', align:"right", editable:true},
      {name:'F_TOTAL',index:'F_TOTAL', align:"right", editable:false}
      ],
      pager: $(".jgpager_bottom"),
      rowNum:10,
      rowList:[10,20,30],
      sortorder: "desc",
      viewrecords: true,
      height: 180,
      caption: 'jqGridサンプル Bottom',
      jsonReader: {
      root: "ROWS",
      page: "PAGE",
      total: "TOTAL",
      records: "RECORDS",
      id: "ID",
      cell: "CELL"
      }
      });

簡単なコードの説明 2行目：下段のグリッドをjgrid_bottomとしています。 3行目：cfcomponentの呼び出しメソッドをgetinfo_bottomとして呼び出しています。

下段のjqGridを描画する<div>を追加します。

            <div class="span12" style="padding-top:5px;">
                  <!--- jqGrid_bottom表示 --->
                  <div class="row-fluid" style="background-color:mintcream;">
                        <div id="d_grid2" style="padding-top:5px;">
                              <table id="list_bottom" class="jgrid_bottom"></table>
                              <div id="pager_bottom" class="jgpager_bottom">
                              </div>
                        </div>
                  </div>
            </div>

次に上段のグリッドがクリックされた時に実行されるjavascriptコードを追加します。

      //上段jgridがクリックされた場合の処理
      $(".jgrid").click(function(){
            // jqGrid選択行ID取得
            var id = $(".jgrid").getGridParam("selrow");
            if( id )
            {
                  var row = $(".jgrid").getRowData(id);
                  var CN = encodeURI(row.CustomerName);
                  //下段jqGridをリロードする
                  $(".jgrid_bottom").setGridParam({url:"GetData_sample.cfc?method=getinfo_bottom&CN=" + CN}).trigger("reloadGrid");
            }
      });

下記が実行結果のスクリーンショット 上段グリッドでクリックした行のCustomerNameを下段のグリッドに渡してリロードした状態です。

今回は短いですが、この辺で。 次回は下段グリッドのセル編集を試してみたいと思います。