ColdFusion Community

The online ColdFusion / CFML community website

Readers of mine will know I'm a big fan of jQuery. Now, we have a great Ajaxified grid in CF8, but a friend wrote to ask me how to use jqGrid (http://www.trirand.com/blog/) with ColdFusion. No problem: I am a freaking guru, after all!

Four and a half hours later, a broken man, having enlisted help from my colleague, Maciej, I finally have the answer...

Here's the HTML:


<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="/jqGrid-3.3/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqGrid-3.3/themes/jqModal.css" />
<script src="/jqGrid-3.3/jquery.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/js/jqModal.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list").jqGrid({
url:'InvoiceMgr.cfc?method=getInvoices',
datatype: 'json',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}],
pager: $('#pager'),
rowNum:10,
rowList:[10,20,30],
sortorder: "desc",
viewrecords: true,
imgpath: '/jqGrid-3.3/themes/basic/images',
caption: 'Invoices',
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
cell: "",
id: "id"
}}
);
});
</script>
</head>
<body>
<table id="list" class="scroll"> <div id="pager" class="scroll" style="text-align:center;"> </body>
</html>

And here's the CFC that it calls for data:

<cfcomponent displayname="InvoiceMgr" extends="halogen.Object" output="false">
<cffunction name="getInvoices" access="remote" output="false" returnformat="json">
<cfset invoices = ArrayNew(1) />
<cfquery datasource="test" name="q">
SELECT * FROM invheader
</cfquery>
<cfloop query="q">
<cfset invoices[currentrow] = [#invid#, '#invdate#', #amount#, #tax#, #total#, #note#]>
</cfloop>
<cfset str = {total=1, page=1, records=#q.recordcount#, rows=invoices}>
<cfreturn str />
</cffunction>
</cfcomponent>

Just in case you ever need to know...

Views: 564

Add a Comment

You need to be a member of ColdFusion Community to add comments!

Join ColdFusion Community

Comment by Jim Papaleo on January 29, 2009 at 21:20
Hal,
I've got a basic jqgrid working. Great! So how do I pass more arguements to the cfc? Say I only want to see a certain invoice? I've been search every where for the answer. So, how do I do that?
Jim
Comment by Mike on December 9, 2008 at 19:59
Hi Hal,
I just try you tuto but it seems to not work, maybe because of the CFC i don't know, the Grid still empty, can you please look any further to give me a solution


Latest Activity

Ben Arledge updated their profile
Mar 8
Matt Osbun and CVgeek are now friends
Feb 9
Matt Osbun updated their profile
Feb 9
Pragnesh Vaghela updated their profile
Jan 23
Profile IconBibin, Octal Info Solution, Ashley Andersen and 2 more joined ColdFusion Community
Jan 18
Bibin liked Pablo Varando's discussion What are you looking for in Free ColdFusin Hosting?
Nov 28, 2013
Sergii Galashyn updated their profile
Nov 26, 2013
Kay Smoljak updated their profile
Nov 22, 2013

Members

Translate this page

© 2014   Created by Nick Tong.

Badges  |  Report an Issue  |  Terms of Service