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: 613

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

kanth posted a blog post

ColdFusion Application Development by ColdFusion Programmers & Developers

ColdFusion application development is associated with the website development. With the unique features of the ColdFusion development along with the ColdFusion Makrup Language which resembles scripting components like JSP and PHP and even ASP but it bares the most resemblance to HTML syntax. The ColdFusion allows developers to develop content publishing systems, dynamic sites, ecommerce sites, self service application and much more.…See More
yesterday
Isaac Dealey updated their profile
yesterday
Thomas Bishop updated their profile
yesterday
Profile IconBecky B, kanth, Jim Bossemeyer and 15 more joined ColdFusion Community
Tuesday
Dennis Matteson updated their profile
Jun 22
Ben Koshy updated their profile
May 2
Ben Arledge updated their profile
Mar 8
Santhosh Kiran Reddy shared Mark Drew's group on Facebook
Mar 1

Members

Translate this page

© 2014   Created by Nick Tong.

Badges  |  Report an Issue  |  Terms of Service