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

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

Profile IconJohn McClain, Michael Steen and Cfdevshop joined ColdFusion Community
Oct 23
Jelle Kralt updated their profile
Sep 19
CVgeek added a discussion to the group CF Contractors
Thumbnail

ColdFusion Developers (London)

ColdFusion Developers (London)The vacancy is with an established independent B2B industry leading online news, research and events business providing a combination of free –to-air news and subscription based market intelligence databases and services. The company also provides online best practice and professional communities and industry events, large and small.Role:They are looking for an experienced additional ColdFusion developer to join the small in-house team to support continued…See More
Sep 11
CVgeek added a discussion to the group Coldfusion Jobs
Thumbnail

ColdFusion Developers (London)

ColdFusion Developers (London)The vacancy is with an established independent B2B industry leading online news, research and events business providing a combination of free –to-air news and subscription based market intelligence databases and services. The company also provides online best practice and professional communities and industry events, large and small.Role:They are looking for an experienced additional ColdFusion developer to join the small in-house team to support continued…See More
Sep 11
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
Jul 30
Isaac Dealey updated their profile
Jul 29
Thomas Bishop updated their profile
Jul 29
Profile IconBecky B, kanth, Jim Bossemeyer and 15 more joined ColdFusion Community
Jul 29

Members

Translate this page

© 2014   Created by Nick Tong.

Badges  |  Report an Issue  |  Terms of Service