Adding JqGrid to Coldfusion 9 page

Download JQGrid from http://www.trirand.com/blog/?page_id=6

 

In test.cfm:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<link rel="stylesheet" href="jquery-uiGrid.css" />
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(e) {

        jQuery("#domainUserGrid").jqGrid({
            url:'cfc/user.cfc?method=getTestUser',
            datatype: "json",
            height: "auto",
            colNames:['#','Username','Phone','Last Updated','Actions'],
            colModel:[
                {name:'userPhoneId_int',index:'userPhoneId_int', width:30},
                {name:'username_vch',index:'username_vch', width:160},
                {name:'phone_vch',index:'phone_vch', width:160},
                {name:'dateUpdated_dt',index:'dateUpdated_dt', width:100},
                {name:'actions',index:'actions', width:120}
            ],
            rowNum:25,
            pager: jQuery('#pager2'),
            rowList:[10,20,30,40],
            pager: '#pager2',
            sortname: 'update_dt',
            viewrecords: true,
            sortorder: "desc",
            caption:"Domain Users",

            jsonReader: {
              root: "ROWS", //our data
              page: "PAGE", //current page
              total: "TOTAL", //total pages
              records:"RECORDS", //total records
              cell: "CELL",
              id: "" //will default first column as ID
              }           
        });

    });
</script>

<table id="domainUserGrid"></table> <div id="pager2"></div>

 

In cfc/user.cfc

<cfcomponent>
    <cffunction name="getTestUser" access="remote" returnformat="plain">
        <cfargument name="page" required="yes">
        <cfargument name="rows" required="yes">
        <cfargument name="sidx" required="yes">
        <cfargument name="sord" required="yes">
        <cfargument name="domain" required="yes">

        <cfparam name="series" default="0">
        <cfset var dataout = '0' />
        <cfset var LOCALOUTPUT = {} />

        <cfquery name="getUsers" datasource="#application.ds#">
            SELECT userPhoneId_int,domainId_int,userid_int,insert_dt,update_dt,username_Vch,phone_vch
            FROM users
            <cfif sidx eq 'undefined' or sidx eq ''>
                order by update_dt desc, insert_dt desc
            <cfelse>
                order by #sidx# #sord#
            </cfif>
        </cfquery>

        <cfif getUsers.recordcount GT 0 AND rows GT 0>
            <cfset total_pages = ceiling(getUsers.recordcount/rows)>
        <cfelse>
            <cfset total_pages = 0>        
        </cfif>

        <cfset LOCALOUTPUT.PAGE = "#page#" />
        <cfset LOCALOUTPUT.TOTAL = "#total_pages#" />
        <cfset LOCALOUTPUT.RECORDS= #getUsers.RECORDCOUNT# />

        <cfset start = ((page-1)*rows)+1>
        <cfset end = page*rows>

        <cfset LOCALOUTPUT.rows = ArrayNew(1) />
        <cfset i = 1>
        <cfloop query="getUsers" startrow="#start#" endrow="#end#">

            <Cfset LOCALOUTPUT.ROWS[i] = StructNew() >
            <cfset LOCALOUTPUT.ROWS[i].ID = "#userPhoneId_int#" />
            <cfset dt = dateformat(update_dt,'mmm dd, yyyy') & ' ' & timeformat(update_dt,'HH:mm:ss')>
            <cfset LOCALOUTPUT.ROWS[i].cell = [#numberformat(i)#,"#username_vch#","#phone_vch#","#dt#","Actions here"] />

            <cfset i = i+1>
        </cfloop>

        <cfreturn  SerializeJSON(LOCALOUTPUT)>
    </cffunction>
</cfcomponent>

Leave a Reply

Your email address will not be published. Required fields are marked *