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

津熊弘和

2012.09.11

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

今回はColdFusion10で標準提供されているcfgridタグではなく、jQueryのプラグインであるjqGridをColdFusionと組み合わせて使ってみた。

ちなみにcfgridでformat="html"で指定した場合のCFML

<cfform name="form01"> 
    <cfgrid format="html" name="grid01" pagesize=11  
            stripeRows=true stripeRowColor="blanchedalmond" 
            bind="cfc:proto.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"  
            delete="yes"
            insert="yes" 
            selectmode="edit" 
            width="500"
            height="300"
            onchange="cfc:proto.editData({cfgridaction},{cfgridrow},{cfgridchanged})"> 
	<cfgridcolumn name="Emp_ID" display=true header="Employee ID" Select="No" width="100"/> 
	<cfgridcolumn name="FirstName" display=true header="Name" width="200"/>  
	<cfgridcolumn name="Email" display=true header="Email" width="200"/>  
    </cfgrid> 
</cfform>

D/BアクセスするためのCFC

<cfcomponent> 
    <cffunction name="getData" access="remote" output="false" returntype="struct"> 
        <cfargument name="page"> 
        <cfargument name="pageSize"> 
        <cfargument name="gridsortcolumn"> 
        <cfargument name="gridsortdirection"> 
        <cfquery name="team" datasource="cfdocexamples">  
            SELECT Emp_ID, FirstName, EMail  
            FROM Employees 
            <cfif len(arguments.gridsortcolumn) and len(arguments.gridsortdirection)>  
                order by #arguments.gridsortcolumn# #arguments.gridsortdirection# 
            <cfelse>
            	order by Emp_ID asc
            </cfif>  
        </cfquery>  
        <cfreturn QueryConvertForGrid(team, page, pageSize)> 
    </cffunction> 
    
    <cffunction name="editData" access="remote" output="false"> 
        <cfargument name="gridaction"> 
        <cfargument name="gridrow"> 
        <cfargument name="gridchanged"> 
	     
        <cfif isStruct(gridrow) and isStruct(gridchanged)> 
	        <cfif gridaction eq "U"> 
	            <cfset colname=structkeylist(gridchanged)> 
	            <cfset value=structfind(gridchanged,#colname#)> 
	            <cfquery name="team" datasource="cfdocexamples">  
	                update employees set <cfoutput>#colname#</cfoutput> =  
	                    '<cfoutput>#value#</cfoutput>' 
	                where Emp_ID = <cfoutput>#gridrow.Emp_ID#</cfoutput> 
	            </cfquery> 
        	<cfelse> 
	            <cfquery name="team" datasource="cfdocexamples">  
        	        delete from employees where emp_id = <cfoutput>#gridrow.Emp_ID#</cfoutput> 
            	</cfquery>  
        	</cfif> 
	    </cfif> 
    </cffunction>
</cfcomponent>

下が実行結果

たったこれだけのコードでそれなりのものが作れるのはColdFusionの魅力ではあります。

但し、上記のコードでCRUDは実現できるのですが、ページ全体の色合いやスキンを変えたいという場合にはこのcfgridは不向きです。そこでタイトルにある通り、jQueryのプラグインであるjqGridを利用してもう少し見た目を綺麗にしたいと思います。

以下はCFMLのサンプルです。（cf10_cfgrid.cfm）

データ形式はjson形式で指定しています。あとcoldfusionは#で始まるものをColdFusionの変数として認識してしまうので、jQueryを使う場合にID指定だとエラーになることもあるので、ここではclassに名前を付けてjQueryで呼び出ししています。

<cfsetting enablecfoutputonly="true">
<cfcontent type="text/html; charset=utf-8">
<cfprocessingdirective pageEncoding="utf-8" suppressWhitespace="true">
<cfoutput>
<!DOCTYPE html>
<html lang="ja">
<head>
      <meta charset="utf-8">
      <title>ColdFusion 10 + jqGrid サンプル</title>
      <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.19.custom.css" />
      <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

      <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js" ></script>
      <script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>
      <script type="text/javascript" src="js/i18n/grid.locale-ja.js" ></script>

      <!--- ページロード時にjqGridを生成する --->
      <script type="text/javascript">
      $(document).ready(function(){
      $(".jgrid").jqGrid({
      url:'GetData_sample.cfc?method=getinfo',
      datatype: 'json',
      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', align:"right", editable:true}
      ],
      pager: $(".jgpager"),
      //cellEdit: true,　←CELL編集可能にする場合はコメントを外します。
      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>
</head>
<body>
      <div>
            <!--- jqGrid表示 --->
            <div style="background-color:mintcream;">
                  <div id="d_grid1" style="padding-top:5px;">
                        <table id="list" class="jgrid"></table>
                        <div id="pager" class="jgpager">
                        </div>
                  </div>
            </div>
      </div>
</body>
</html>
</cfoutput>
</cfprocessingdirective>      
<cfsetting enablecfoutputonly="false">

データベース呼び出し側のサンプル GetData_sample.cfc は以下の通りです。

<cfcomponent displayname="GetInfoMgr" output="false">
	<cffunction name="getinfo" access="remote" output="false" returnformat="json">

		<cfset invoices = ArrayNew(1) />

			<cfquery datasource="sample" name="q">
				SELECT ID,Remark,RealName,ProjectName,CustomerName,Resale FROM sample
			</cfquery>

		<cfloop query="q">
			<cfset invoices[currentrow] = { id=#ID#,cell=[#ID#,'#Remark#', '#RealName#', '#ProjectName#', '#CustomerName#' , '#Resale#'] }>
		</cfloop>
		<cfset str = {total=1, page=1, records=#q.recordcount#, rows=invoices}>
	<cfreturn str />
	</cffunction>
</cfcomponent>

実行結果