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

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

Isaac Dealey posted a discussion

PayPal Cart Integration

Hey guys,I know I haven't been on here in a little while. I'm hoping one of you will have some information on this...A client of mine asked me to integrate PayPal into their existing custom shopping cart. It's just the typical old PayFlow-style, send the browser to PayPal and then bring them back afterward. I read through all the documentation and I've got it creating the form and sending to PayPal and it all works.Now PayPal says form encryption is not required, although they also say you…See More
Jan 2
Isaac Dealey updated their profile
Jan 1
Profile IconJohn McClain, Michael Steen and Cfdevshop joined ColdFusion Community
Oct 23, 2014
Jelle Kralt updated their profile
Sep 19, 2014
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, 2014
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, 2014
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, 2014
Thomas Bishop updated their profile
Jul 29, 2014

Members

Translate this page

© 2015   Created by Nick Tong.

Badges  |  Report an Issue  |  Terms of Service