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

第4回目の記事ではページ内に２つのグリッドを配置し、上段、下段のグリッドを連動させるまでを試してみました。今回は下段グリッドのカラムを直接編集してデータベースへのアップデート処理を行うところまでを試してみます。

更新の方法には3種類あるみたいです。

1. セル編集
2. インライン編集
3. フォーム編集

初心者なので一番シンプルそうなセル編集で試してみます。

前回下段jqGrid用のjavascriptを追加したcf10_cfgrid.cfmのサンプルソースに新たにcellEdit,cellsubmit,cellurlの3行を追加します。またcolModelにformatter:'number'を追加しました。

      $(".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", formatter:'number', editable:true},
      {name:'Q2',index:'Q2', align:"right", formatter:'number', editable:true},
      {name:'Q3',index:'Q3', align:"right", formatter:'number', editable:true},
      {name:'Q4',index:'Q4', align:"right", formatter:'number', editable:true},
      {name:'F_TOTAL',index:'F_TOTAL', align:"right", formatter:'number', editable:false}
      ],
      pager: $(".jgpager_bottom"),
      cellEdit: true,//今回で追加した行
      cellsubmit: "remote",//今回で追加した行
      cellurl: "SetData_sample.cfc?method=setinfo_bottom",//今回で追加した行
      rowNum:10,
      rowList:[10,20,30],
      sortorder: "desc",
      viewrecords: true,
      imgpath: 'themes/basic/images',
      height: 180,
      caption: 'jqGridサンプル Bottom',
      jsonReader: {
      root: "ROWS",
      page: "PAGE",
      total: "TOTAL",
      records: "RECORDS",
      id: "ID",
      cell: "CELL"
      }
      });

1. 18行目でセルの編集を有効にします。
2. 19行目でセルの内容がどこに保存されているか指定します
3. 20行目でセル内容が変更された場合に呼び出されるURLを指定します。（method名はsetinfo_bottomとしています。）

セル内容が変更された場合に呼び出されるcfcomponentを新たに用意します。（以下がSetData_sample.cfcのサンプルコード）

<cfcomponent displayname="SetInfoMgr" output="false">
	<cffunction name="setinfo_bottom" access="remote" output="true" returnType="boolean">
		<cfset str = "">

		<!--- POSTされてきた値が数値でない場合はupdateせずに未処理で抜ける --->
		<cfif isDefined("form.Q1") and #IsNumeric(form.Q1)#>
			<cfset str = " set Q1=" & #form.Q1#>
		</cfif>

		<cfif isDefined("form.Q2") and #IsNumeric(form.Q2)#>
			<cfset str = " set Q2=" & #form.Q2#>
		</cfif>

		<cfif isDefined("form.Q3") and #IsNumeric(form.Q3)#>
			<cfset str = " set Q3=" & #form.Q3#>
		</cfif>

		<cfif isDefined("form.Q4") and #IsNumeric(form.Q4)#>
			<cfset str = " set Q4=" & #form.Q4#>
		</cfif>

		<cfset sqlstring = #str# & " where ID=" & #form.id#>

		<cfif #form.oper# is "edit">
			<cfquery name="upd_bottom" datasource="sample">
				update sample_bottom #preserveSingleQuotes(sqlstring)#
			</cfquery>
			<cfreturn true />
		<cfelse>
			<cfreturn false />
		</cfif>
	</cffunction>

</cfcomponent>

jqGridでセルの値を変更すると即座に指定したurlが呼び出され、変更した対象カラム情報とは別に自動的にidとoperの2つのパラメータが渡されます。 具体的には　Q2=3000.00&id=1&oper=edit　のような感じでSetData_sample.cfcに渡されます。渡されたパラメータはform変数として評価することができます。

1. 6行目、10行目、14行目、18行目でそれぞれどのカラムを変更したかを判別し、SQLを組み立てています。
2. 24行目でオペレーションタイプを判別し、editで来ている場合にupdate文を実行します。
3. 返り値はvoidでもいいかなと思いましたが、一応booleanで返すようにしています。

これでセル編集した値をサーバで受け取り、データベースへupdateするところまで動かすことができました。 ついでにセル編集で入力確定時のvalidation checkを入れておきたいと思います。想定としては数値しか受け付けないようにしておきたいので数値以外が入力された場合はエラーダイアログボックスを出すようにします。

jqGridはなかなか便利ですね、editrulesというものを指定することができます。cf10_cfgrid.cfmのサンプルソースの8行目〜16行目のjavascriptコードの部分にeditrulesの指定を追加します。（下段jqGridのcolModel部分です）

colModel :[
{name:'ID',index:'ID', hidden:true},
{name:'F_TIME',index:'F_TIME', align:"left", editable:false},
{name:'Q1',index:'Q1', align:"right", formatter:'number', editable:true, editrules:{number:true}},
{name:'Q2',index:'Q2', align:"right", formatter:'number', editable:true, editrules:{number:true}},
{name:'Q3',index:'Q3', align:"right", formatter:'number', editable:true, editrules:{number:true}},
{name:'Q4',index:'Q4', align:"right", formatter:'number', editable:true, editrules:{number:true}},
{name:'F_TOTAL',index:'F_TOTAL', align:"right", formatter:'number', editable:false}
],

セルに数値以外のものを入力した場合に下記のダイアログボックスが出る様になりました。

ちなみにダイアログボックスのキャプションはデフォルトで『エラー』と出ますが、素っ気ないので『入力エラー』となるように変更しています。またjqGridで該当レコードがない場合もデフォルトでは『表示するレコードがありません』となっているのですが、長過ぎるので、シンプルに『0件』となるように変更しています。