ColdFusion 10 + jqGridを使ってみる(その4)

2012.09.14

第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 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を下段のグリッドに渡してリロードした状態です。

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