この記事は公開されてから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>
実行結果
次回はもう少しjqGridを詳しく調べていきたいと思います。