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

津熊 弘和

2012.09.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回はより実務で使うことを考慮して、jqGridのオプションを追加してみたいと思います。前回の記事（その１）ではごく普通のjqGridを動作させましたが、今回はformatterを使って、数値の場合の表示形式を指定してみます。

前回の記事のサンプルコード（cf10_cfgrid.cfm）に以下のformatterの指定を追加します。コードが長くなるので、jqGridの呼び出し部分だけを掲載します。ColdFusionのcfgridタグ内でcfgridcolumnを使って数値に関してnumberFormatで指定できるとマニュアルには記述があるのですが、対応しているフォーマットがformat="applet"の場合だけでその他のフォーマットではnumberFormatが効かないっぽいです。

ということで、小数点の表示が必要な場合はcfgridでformat="html"では対応が厳しいと思います。まぁ頑張ればできなくはないでしょうが、その労力を使うのであればcoldfusionを使うメリットが何もないのでやりませんが。。。

<!--- ページロード時にjqGridを生成する --->
      <script type="text/javascript">
      $(document).ready(function(){
      $(".jgrid").jqGrid({
      url:'GetDat_sample.cfc?method=getinfo',
      datatype: 'json',
      formatter : {
      integer : {thousandsSeparator: " ", defaultValue: '0'},
      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
      currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"$", defaultValue: '0.00'}
      },
      colModel :[
      {name:'ID',index:'ID'},
      {name:'Remark',index:'Remark'},
      {name:'RealName',index:'RealName', editable:true},
      {name:'ProjectName',index:'ProjectName', align:"left", editable:true},
      {name:'CustomerName',index:'CustomerName', align:"left", editable:true},
      {name:'Resale',index:'Resale', formatter:'number', align:"right", editable:true}
      ],
      pager: $(".jgpager"),
      //cellEdit: true,
      rowNum:10,
      rowList:[10,20,30],
      sortorder: "desc",
      viewrecords: true,
      height: 180,
      caption: 'jqGridサンプル',
      jsonReader: {
      root: "ROWS",
      page: "PAGE",
      total: "TOTAL",
      records: "RECORDS",
      id: "ID",
      cell: "CELL"
      }
      });

      });
      </script>

実行した結果は以下となります。Resaleのカラムが小数点第2桁までちゃんと表示されました。

formatterの指定でcolModelに直接指定する方法もあります。name:'Resale'の行を下記の様に変更して記述します。

     {name:'Resale',index:'Resale', formatter:'number', align:"right", editable:true}
     ↓下の様にコードを変更します。
     {name:'Resale',index:'Resale', formatter:'number', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2},align:"right", editable:true}

次回はフォームで入力した値をjqGridに引き渡してそのフォームで入力した値に合致するデータを表示させる検証をしたいと思います。

AWS