この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回はより実務で使うことを考慮して、jqGridのオプションを追加してみたいと思います。前回の記事(その1)ではごく普通の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に引き渡してそのフォームで入力した値に合致するデータを表示させる検証をしたいと思います。